Upload image using reduction form

Question

I have a form.js redux-form that works and sends the data back to my API, but I also need to allow the sender to upload the image with the form, ideally with a preview. I did a bit of work and came to dropzone.js, but it looks like I can’t get my form in order to actually send 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 returns the POST back to the API, which is large, but contains the following:

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

Can someone tell me how I can get the actual binary data in this variable?

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

Answer 1

I recently had a similar problem, and I decided to use it using the FileReader API to convert the blob url to Base64 (you can also convert to a binary string).

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

My sample code is:

 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); on 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;

Answer 2

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

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

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

Moreover, these solutions will also help you with something to get rid 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/

Answer 3

Upload an image using a Node server

Try to catch the file in the server endpoint function using formidable

 app.post('/upload', function (req, res) { // express endpoint var form = new formidable.IncomingForm(); form.parse(req, function(err, fields, files) { // "req" is server request object fs.rename(files.file.path, "/tmp/" + files.file.name); // move file to desired location }); // handle rest of text fields from req.body if there are any }); 

This is an example of Node express, but you can use Node http as in a formidable example.

Answer 4

Below are the steps for the file-upload function: (how to process image data in your API)

• Add redux values ​​to FormData strong> .

   let formData = new FormData(); formData.append('myFile', files[0]); 

• Send a multipart/form-data request from the client to your API using axios or fetch library

• Get this multipart/form-data request in your API, process it multer , and then write the file to 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 using Express Static