Reputation: 3109
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:
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!
Upvotes: 0
Views: 362
Reputation: 106736
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.
Upvotes: 1