reactjs - Firebase storage upload on React submit form -


is possible upload files on submit? not sure how combine these two: has uploads file first update name or creates new name without file on submit.

<form ref={(input) => { this.locationform = input }} onsubmit={this.createlocation} >     <input ref={(input) => this.name = input} type="text" name="name" placeholder="name" />     <input ref={(input) => this.file = input} type="file" onchange={this.uploadfile} id="filebutton" /> </form> 

and

   createlocation(event) {         event.preventdefault();          const store = {             ['store']: {                 name: this.name.value,                 desc: this.desc.value             }         }          this.props.setstore(store);     }      uploadfile(e) {         const file = e.target.files[0];         const storageref = firebase.storage().ref('test/' + file.name);          storageref.put(file);     } 

setstore calls redux function , updates.

yes possible, following.

<input type="file" id="my-file-id" /> // no need of on change listener 

then in createlocation function

var myfile= document.getelementbyid('my-file-id').files[0]; const storageref = firebase.storage().ref('test/' + myfile.name);  storageref.put(file); 

note: component "input", have imported 'antd', feel above works "input" component of jsx if not , following

npm install antd // node modules 

in component

import { input } 'antd' 

Comments