reactjsreact-dropzone

React-Dropzone how convert each file to base64


I am using react-dropzone plugin for file uploads. I worried how i can convert each file to base64:

eg:

Here is my function where i get files: I am creating here for example thumb for each file and attach to object. But how add to item here prop like base64string: and it will keep base64 data for each file?

this.onDrop = files => {
      files.map(file =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      );
    };

Solution

  • check this out,you can get files and then you can store them into images array of state instance.

    onDropHandler = (files) => {
        files.map(file => {
            const reader = new FileReader();
            reader.onload = (event) => {
                //store result into your state array.
                this.setState(prevState => {
                    const updatedImages = [...prevState.images, event.target.result];
                    return {
                        images: updatedImages,
                    }
                })
                console.log(event.target.result);
            };
            reader.readAsDataURL(file);
        });
    }