CODEWITHSUNDEEP
node.jsexpressreactjs
Morgan G
Morgan G

Reputation: 3109

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!

Upvotes: 0

Views: 362

Answers (1)

mscdex
mscdex

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

Related Questions