Morgan G Morgan G - 14 days ago 8
Node.js Question

React-Node File Uploader

So I am having a really really hard time getting file uploading to work. I didn't think this was going to be as challenging as it has been.

So I'll start with the simple HTML element:

<input type="file" id="server-avatar-file" className="file-input" accept=".jpg,.jpeg,.png" onChange={this.handleChange} style={{position: "absolute", top: "0px", left: "0px", width: "100%", height: "100%", opacity: "0", cursor: "pointer"}} />


Here is my submit of the form data:

handleSubmit = (event) => {
event.preventDefault();

axios.post('/api/v1/testing/upload',
this.state.file)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
};


I've used busboy, multipart everything I can think of.

I however believe the issue is stemming from my front-end not sending all the correct info to my backend.

That is what this.state.file has as it's value:

enter image description here

I understand bodyParser in Node does not parse file types, and I am unfamiliar with how to parse them on the server. I would like to test it by uploading to my file system, but would like to move over to a CDN in production, so something that makes it easy for me to do that would be great!

Answer

busboy, multer, and other multipart parsing modules require properly formatted multipart/form-data requests. One easy way to send a request like this with axios is to instead pass a FormData instance instead of a raw File or Blob instance as the data argument.

Comments