Cannot append to formData object on file upload in React

Question

I am new to react and I am attempting to upload a file to my node backend, but I've spent a while at this and cannot get it to work. I appear to send the data correctly to my handle function, but after that I cannot append it to my formData object.

Here is the function that I call on a handle submit button from my upload html.

 uploadAction(){
    var self = this;
    console.log('inside uploadAction');

    var data = new FormData();
    // var filedata = {};
    var filedata = document.querySelector('input[type="file"]').files[0];

    data.append('file', filedata);

    console.log('this is the value of data in uploadAction ', data);
    console.log('this is the value of filedata in uploadAction ', filedata)

    const config = { headers: { 'Content-Type': 'multipart/form-data' } };
     axios.post('http://localhost:5000/upload',{
       filedata: data
     },config)
       .then((response)=>{
         console.log('back again success from upload');
       })
       .catch((err)=>{
         console.error('error from upload ', err);
       });

So when I console log out the data and the filedata objects I get the following result.

this is the value of data in uploadAction  FormData {}

this is the value of filedata in uploadAction  File {name: "suck.jpg"....

So somehow it appears that my filedata is being brought in correctly, but there's a disconnect on how this being appended to the data object. Which I find confusing, as this seems to be the way I've found to append this data object from looking at these things online. I think my axios call is correct, but I am of course getting to an error before that.

Does anyone have any suggestions on how I can fix this? Is there an easier way to do this in react that doesn't involve using querySelector? I probably don't want to use dropzone or a similar library/package, I just want to learn how to do a simple upload file.

If anyone has any suggestions on this I would really appreciate it. I've spent some time on this and I seem to be going in circles.

EDIT: as per the suggestion of the first comment below I have added

for (var pair of data.entries()) {
  console.log(pair[0]+ ', ' + pair[1]);
}

to my code to try and console log my data value (ie the dataForm object). The result was:

file, [object File]

while this is true, it doesn't help fix my problem.

Possible duplicate of [How to inspect FormData?](https://stackoverflow.com/questions/17066875/how-to-inspect-formdata) — Mayank Shukla, Jun 01 '17 at 20:22
I've tried that solution, and it did not work as I needed. I will edit my comment. — Peter Weyand, Jun 01 '17 at 20:30

Inanda Menezes · Answer 1 · 2017-06-01T21:29:23.320

Change your call to the following way and it should work (data is your FormData):

axios.post('http://localhost:5000/upload',data,config)

In addition to it, as you are using React, instead of using querySelector, you could use the onChange event from your file input. Just as an example:

    import React,{Component} from 'react'
    class UploadComponent extends Component {
      constructor(props, context) {
        super(props, context);
        this.state = {file: null};

        this.handleFileChange = this.handleFileChange.bind(this);
        this.sendFile = this.sendFile.bind(this);
      }

       handleFileChange(event) {
          this.setState({file:event.target.files[0]})
        }

       sendFile() {
          //In here you can get the file using this.state.file and send
        }

      render() {
       return(
            <div>
              <input className="fileInput" type="file" onChange={this.handleFileChange}/>
              <button type="submit" onClick={this.sendFile}>Upload </button>

            </div>
       )
     }
    }

Cannot append to formData object on file upload in React

1 Answers1