REACT DROPZONE: Get data:images after upload

Question

As topic, I want get data:images after upload. I get that if only upload one image. If multiple images how to array it in console?

constructor(props) {
  super(props);
  this.state = {
    image: null
  };
}

onDropMain(mainImage) {
    var that = this
    let reader = new FileReader()
    reader.readAsDataURL(mainImage[0])
    reader.onloadend = function() {
        var result = reader.result
        that.setState({
            mainImage: result
        });
    }
    console.log(reader);
}

This is how I get single data:images, but how about multiple images? Anyone has experience in this?

score 2 · Accepted Answer · edited May 20 '17 at 16:16

To read multiple images:

1. First define a function that will read a single file.

2. Use any loop to call that function for each entry of the array.

3. Use array in state variable to store the result, instead of a single variable.

constructor(props) {
  super(props);
  this.state = {
    image: []
  };
}

Use this function to read multiple files:

onDropMain(mainImage) {
    var that = this;

    function read(file){
        let Reader = new FileReader();
        Reader.onload = function (event) {
            let image = that.state.image.slice();
            image.push(event.target.result);
            that.setState({image}, () => console.log(image));
        };
        Reader.readAsDataURL(file);
    }

    if (mainImage && mainImage.length) {
        [].forEach.call(mainImage, read);
    }    
}

Check the answers of this question for details about [].forEach.call(mainImage, read).

REACT DROPZONE: Get data:images after upload

1 Answers1