using FormData() in react keeps returning null

Question

I am building a React app and in it there's a part where i should set up a profile picture, but every time i call the api i keep getting an error that i haven't filled one of the fields for the post api to return a success response.

this is my jsx

<form>
    <input type="file" name="file" onChange={(e) => this.handleFile(e)}></input>
    <button type="button" onClick={(e) => this.handleUpload(e)} >send</button>
</form>

and here is the code i'm using to handle those

state = {
   file: null
};
handleFile(e) {
   console.log(e.target.files, "ssss");
    console.log(e.target.files[0], "ssss");
    let file = e.target.files

    this.setState({ file: e })
}
handleUpload(e) {
  let file = this.state.file
  let fromdata = new FormData();
  fromdata.append('image', file);
  fromdata.append('name', "filedata");
  const headers = {
        Authorization': localStorage.getItem('api_key'),

  }
  const user = {
       filedata: fromdata,
       type: 1,
  };
  axios.post(`sth sth`, user, {
       headers: headers
  })
       .then(res => {
           console.log(res);
           console.log(res.data);
        })
}

so basically the server requires type and filedata but every time i send an api request it keeps returning me

filedata: ["The filedata field is required."]

and i can't seem to find where the problem is.

BoyePanthera · Accepted Answer · 2020-03-19 12:18:46Z

1

Work on your handleFile function properly and add a Content-Type/Accept header to your api request, your final code should look something like this. on your api console.log (req.file) you should see your file now reaches server successfully, or if you can provide a bit of your server code, I can be able to help further.

import React from 'react';
import axios from 'axios';

export class Test extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            file : null
        }
        this.handleFile = this.handleFile.bind(this)
        this.handleUpload = this.handleUpload.bind(this)
    }

    handleFile(e) {
        let file = e.target.files[0]
        this.setState({ file })
    }

    handleUpload (e) {
        e.preventDefault();
        let file = this.state.file
        let fromdata = new FormData();
        fromdata.append('image', file);
        const headers = {
                'Authorization': localStorage.getItem('api_key'),
                'Content-Type' : 'multipart/form-data'
        }
        const user = {
            filedata: fromdata,
            type: 1,
        };
        axios.post(`sth sth`, user, {
            headers
        })
       .then(res => {
           console.log(res);
           console.log(res.data);
        })
    }


    render() {
        return (
            <form onSubmit={this.handleUpload}>
                <label>File</label><br/>
                    <input type='file' onChange={this.handleFile}/>
                <button>Send File!</button>
            </form>
        )
    }
}

answered Mar 19, 2020 at 12:18

BoyePanthera

6447 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

the preacher Over a year ago

hey thanks for the answer but i still get that error, when i put a string in front of filedata in user like filedata: "sth sth" it Successfully sends it, but it seems like it has problem getting it from DataForm, and is it possible that it may be a server side problem?

the preacher Over a year ago

actually when i send a string or something like that i get a message saying "Call to a member function move() on null"

BoyePanthera Over a year ago

Send me the server side code, are you writing it in Nodejs or Python? If any of those you can share will help you look through

score 1 · Accepted Answer · 2020-03-20 15:32:40Z

1

Assuming that you want to upload a single file, The problem I see is in setting the file to state. You are putting the entire response into the state in this statement: this.setState({ file: e }) change it to this.setState({ file: e.target.files[0] }).

Basically you are taking in more than just the file, you are taking in the entire response and other data that comes in when a user uploads a file using the choose file input button and because of that things can't be read well.

My practice: I would put the file into a global var instead of the state.

Usually in cases like this, its the function that doesn't complete but the main thread keeps on running, thats why variables state null or older value.

var file, fromdata;

handleFile(e) {
    file = e.target.files[0];
}
handleUpload(e) {
    fromdata = new FormData(); //make sure this statement completes before moving any further
    fromdata.append('image', file);
    fromdata.append('name', "filedata");
    const headers = {
        Authorization': localStorage.getItem('api_key'),

    }
    user = {
        filedata: fromdata,
        type: 1,
    };
    axios.post(`sth sth`, user, {
        headers: headers
    })
        .then(res => {
            console.log(res);
            console.log(res.data);
        })
}

edited Mar 20, 2020 at 15:32

answered Mar 19, 2020 at 11:31

user3651521

6 Comments

the preacher Over a year ago

nah, it keeps returning that even after i changed it.

user3651521 Over a year ago

@thepreacher are you updating the const user If this is the code that does all then, const user has no data in it, therefore the error message.

the preacher Over a year ago

so whenever i choose a photo the setState updates file and after that when i click send the variable file uses that state to get the value so i guess it get's updated, doesn't it?

user3651521 Over a year ago

@thepreacher no I don't think the const user is being touched, even tho you are creating a new FormData()

the preacher Over a year ago

well even when i put {filedata:fromdata} instead of user i keep getting that error

|

Collectives™ on Stack Overflow

using FormData() in react keeps returning null

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related