Add Product Form with firebase database in ReactJs
Add product form bootstrap design with firebase database in Reactjs
Add product form bootstrap design with firebase database in Reactjs
AddProductForm.js
import React from 'react';
import firebase from 'firebase';
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxxxxx"
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
export default class App extends React.Component
{
constructor(props) {
super(props);
this.state = {
url: "",
p_com:"",
progress: 0,
p_cat_val:"",
p_desc:'',
p_kw:0,
p_nm:"",
p_qty:0
};
this.onValueGet= this.onValueGet.bind(this);
this.onSelval=this.onSelval.bind(this);
this.fileSelectHandler = this.fileSelectHandler.bind(this);
this.onValue_show = this.onValue_show.bind(this);
}
fileSelectHandler = event=>{
alert('uploading ....');
const image = event.target.files[0];
alert(image.name);
const uploadTask = firebase.storage().ref(`images/${this.state.p_nm}`).put(image);
uploadTask.on('state_changed',
(snapshot)=>{
},(err)=>{
console.log(err)
},()=>{
alert('img uploaded');
});
}
onValueGet(event)
{
this.setState({
[event.target.name]:event.target.value,
});
}
onSelval(e)
{
this.setState({p_cat_val:e.target.value});
}
onValue_show()
{
// alert('A name was company: ' + this.state.p_com);
// alert('A name was password: ' + this.state.p_desc);
// alert('A name was password: ' + this.state.p_qty);
// alert('A name was password: ' + this.state.p_kw);
// alert('product category: ' + this.state.p_cat_val);
try{
firebase.database().ref('products/'+this.state.p_cat_val+'/'+this.state.p_nm.toLowerCase()).set({
Description:this.state.p_desc.toLowerCase(),
Company_name:this.state.p_com.toLowerCase(),
Quantity:this.state.p_qty.toLowerCase(),
p_KW:this.state.p_kw.toLowerCase(),
});
this.setState({
url: "",
p_com:"",
progress:"",
p_cat_val:"",
p_desc:'',
p_kw:"",
p_nm:"",
p_qty:""
});
}catch(err)
{
alert('errrr');
}
}
render()
{
return(
<div>
<h1>Add Product</h1>
<div className="row">
<div className="col-md-6">
<form>
<div className="form-group">
<label>Product Name</label>
<input className="form-control" type="text" name="p_nm" required
onChange={this.onValueGet}
/>
</div>
<div className="form-group">
<label>Company Name</label>
<input className="form-control" type="text" name="p_com" required
onChange={this.onValueGet}
/>
</div>
<div className="form-group">
<label>Product Description</label>
<textarea className = "form-control" rows="5" name="p_desc"
onChange={this.onValueGet}></textarea>
</div>
<div className="form-group">
<label>Product Category</label>
<select className="form-control" onChange={this.onSelval} required>
<option value="">Select Category</option>
<option value="inverter">Inverter</option>
<option value="panels">Panels</option>
<option value="solarkit">SolarKit</option>
</select>
</div>
<div className="form-group">
<label>KW(Killo Watt)</label>
<input className="form-control" type="number" name="p_kw"
onChange={this.onValueGet} required />
</div>
<div className="form-group">
<label>Available Quantity</label>
<input className="form-control" type="number" name="p_qty" required
onChange={this.onValueGet}/>
</div>
<div className="form-group">
<label>Product Image</label>
<input className="form-control" type="file" onChange={this.fileSelectHandler} ></input>
</div>
<input type="button" className="btn btn-danger" value="ADD PRODUCTS" onClick={this.onValue_show} />
</form>
</div>
</div>
</div>
);
}
}
 |
| Output |
