I am uploading a zip file in the input field. An onChange function is called which gets the file and will have to upload the file to the backend. I am appending the file into "FormData" and when I try consoling it, it is empty.


constructor(props){
        super(props);
        this.state ={
            files: null,
        };
    }

handleFileUpload(e){
        this.setState({
            files: e.target.files[0]}, () => {
                console.log("files are", this.state.files);
            })
}


handleSubmit(e){
        e.preventDefault();

        const data = new FormData();
        data.append('file', this.state.files);

        console.log("data after upload is", data);
    }

return(
  <input name="file" type="file" onChange={(e) => this. handleFileUpload(e)}/>
<button onClick={this.handleSubmit.bind(this)}>Submit</button>
)

Please do help me out. When I try consoling the FormData's object it returns an empty response as shown below

data after upload is FormData {} proto: FormData

0 Answers