How to multiple image upload with React.js to Firebase

Question

using react js I need multiple image upload to firebase I tried with below code is not working to multiple upload.

//display multi
handleChange(event) {

    const file = Array.from(event.target.files);
    this.setState({ file });   
}
//upload multi
fileuploadHandler = () => {

    const storageRef = fire.storage().ref();
    storageRef.child(`images/${this.state.file.name}`)
        .putFile(this.state.file).then((snapshot) => {

    });
  }

render() {
    return (
        <div className="App">
            <input id="file" type="file" onChange={this.handleChange.bind(this)} required multiple />
            <button onClick={this.fileuploadHandler}>Upload!</button>               
            </div>

    )

}

Frank van Puffelen · Accepted Answer · 2018-06-10 16:24:48Z

3

To handle multiple files, you'll need to loop over the files property of the input.

So:

const storageRef = fire.storage().ref();
this.state.file.forEach((file) => {
  storageRef
      .child(`images/${file.name}`)
      .putFile(file).then((snapshot) => {
  })
});

answered Jun 10, 2018 at 16:24

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to multiple image upload with React.js to Firebase

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related