Add Product Form 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 |