12

I have a react.js redux-form that works and posts data back to my API but I need to also allow the submitter to upload an image with the form, ideally with a preview. I struggled a bit and have arrived at dropzone.js but I can't seem to get my form to actually POST the image data back.

render () {
  const FILE_FIELD_NAME = 'files';

    const renderDropzoneInput = (field) => {
      const files = field.input.value;
      return (
        <div>
          <Dropzone
            name={field.name}
            onDrop={( filesToUpload, e ) => field.input.onChange(filesToUpload)}
          >
            <div>Try dropping some files here, or click to select files to upload.</div>
          </Dropzone>
          {field.meta.touched &&
            field.meta.error &&
            <span className="error">{field.meta.error}</span>}
          {files && Array.isArray(files) && (
            <ul>
              { files.map((file, i) => <li key={i}>{file.name}<img src={file.preview}/></li>) }
            </ul>
          )}
        </div>
      );
    }

    return (
        <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
          <div className="form-group">
            <Field name="files" component={renderDropzoneInput} />
          </div>
          <button type="submit" className="btn btn-default">Submit</button>
        </form>
    );
}

The files variable does get POSTed back to the API which is great but it contains the following:

[preview=blob:http://localhost:3000/bed3762e-a4de-4d19-8039-97cebaaca5c1]

Can anyone suggest how I get the actual binary data in to that variable please?

The full code is available here https://github.com/rushughes/dsloracle/blob/master/client/src/components/LandCreate/index.js

1
  • Can you point me to the file where you receive the form data on the server side?
    – zarcode
    Jan 9, 2018 at 19:10

3 Answers 3

5
+100

I recently had a similar issue and solved it by using the FileReader API to convert the blob url to Base64 (can also convert to binary string).

Then you send the Base64 or binary string to the server.

My example code:

onDrop(acceptedFiles: any): any {

    let images: any = this.state.Images;

    acceptedFiles.forEach((file: any) => {

        const reader: FileReader = new FileReader();
        reader.onload = () => {
            const fileAsBase64: any = reader.result.substr(reader.result.indexOf(",") + 1);
            images.push(fileAsBase64);
        };

        reader.onabort = () => console.log("file reading was aborted");
        reader.onerror = () => console.log("file reading has failed");

        reader.readAsDataURL(file);
    });

    this.setState(prevState => ({   
         Images: images,
    }));
}

If you want to send a binary string instead of base64 change reader.readAsDataURL(file); to reader.readAsBinaryString(file);

and this line: const fileAsBase64: any = reader.result.substr(reader.result.indexOf(",") + 1); can be simplified to const file: any = reader.result;

2
  • Excellent, thanks for the help, this one weird trick has set me back on the path to success. This week you are my personal hero! Thank you so much Liam! 🎉
    – RusHughes
    Jan 17, 2018 at 6:55
  • Any reason to send base64 (33% more data) instead of just pure binary?
    – none32
    Feb 12, 2020 at 21:47
2

Here are the steps for file-upload feature: (How to handle image data in your API)

  • Append your redux-form values to the FormData instance.

    let formData = new FormData();
    formData.append('myFile', files[0]);
    
  • Send multipart/form-data request from Client to your API with axios or fetch library:

  • Receive that multipart/form-data request in your API, process it with multer and then write the file to the disk storage or memory storage as follows:

    $ npm install --save multer
    
    const multer  = require('multer')
    
    const storage = multer.diskStorage({
      destination: function (req, file, cb) {
      cb(null, '/tmp/my-uploads')
     },
      filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now())
     }
    })
    
    const upload = multer({ storage: storage })
    
    const app = express()
    
    app.post('/upload', upload.single('myFile'), (req, res, next) => {
      // req.file is the `myFile` file
      // req.body will hold the text fields, if there were any
     })
    
  • (Optional) Serve files directly from your API with Express Serve-Static

1

There are solutions available for React.js with Dropzone. Please refer to following:

http://reactdropzone.azurewebsites.net/example/

Which code can be found here: https://react.rocks/example/React-Dropzone

Further more these solutions will also assist you in some way, to get out of the problem:

https://github.com/react-dropzone/react-dropzone

https://medium.com/technoetics/handling-file-upload-in-reactjs-b9b95068f6b

http://blog.mauriziobonani.com/dropzone.js-react.js-and-fluxxor-integration/

https://css-tricks.com/image-upload-manipulation-react/

https://www.reddit.com/r/reactjs/comments/6k6fjr/reactdropzone_integration_with_react/

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.