Morgan G Morgan G - 1 year ago 264
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) => {
.then(function (response) {
.catch(function (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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download