How to attach file upload with state values

Question

This is my React State

this.state = {
            data : {
                employee_Name:"" ,
                employee_Id:"",
                employee_Doj:"",
                employee_ResumeFile:""
             }
}

I am getting uploaded file data on change

onChangeHandler=event=>{
    const data = { ...this.state.data }; 
    data.employee_ResumeFile = event.target.files[0];
    this.setState({ data }); 
    console.log(data);

}

How to add this to my axios along with existing state data

doSubmit() {    
   // How to add this form data inside my axios
    const data = new FormData() 
    data.append('file', this.state.data.employee_ResumeFile)

   axios.put(apiEndpoint+'/update/'+this.props.match.params.id+'/basic-details',{
        employee_Name:this.state.data.employee_Name, 
        employee_Id: this.state.data.employee_Id,
        employee_Doj:this.state.data.employee_Doj, 
        employee_ResumeFile.state.data.employee_ResumeFile
      })
}

Should we use only formdata() to send file if then how to add formdata value inside my axios with existing values

Hi, Yes to upload any file to the server you must send the body in the formData() — rashi jain
– rashi jain, Commented Jun 19, 2020 at 9:39
@rashijain how to add const data = new FormData() data.append('file', this.state.data.employee_ResumeFile) this inside my axios with with existing values — Vinod Kumar
– Vinod Kumar, Commented Jun 19, 2020 at 9:42
you need to append the complete body into formData let formData = new FormData(); formData.append('file', this.state.data.employee_ResumeFile); formData.append(employee_Name,this.state.data.employee_Name); ... — rashi jain
– rashi jain, Commented Jun 19, 2020 at 9:47

Guru Hadadi · Accepted Answer · 2020-06-19 10:40:27Z

2

Yes use FormData and make sure to add correct headers.

Like this

doSubmit() {   
     const data = new FormData() 
     data.append('file', this.state.data.employee_ResumeFile)
     data.append('name', this.state.data.employee_Name)
     data.append('id', this.state.data.employee_Id)
     data.append('doj', this.state.data.employee_Doj)
     const config = {
        headers: {
            'content-type': 'multipart/form-data' // <-- Set header for 
        }
    }
    axios.put(apiEndpoint+'/update/'+this.props.match.params.id+'/basic-details',data, config)
 }

Editing based on comments. If lot of stuff needs to be appended to formdata, then you can maintain it in an object and loop thru it using for in and dynamically append stuff to formData.

As I see in your question that you have fields maintained in the state, so you can do something like this.

    ...
    const data = new FormData() 
    for(let key in this.state.data) {
        data.append(key,this.state.data[key]);
    }
    ...
    // axios.post code....

edited Jun 19, 2020 at 10:40

answered Jun 19, 2020 at 9:46

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

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

1 Comment

Vinod Kumar Over a year ago

any better way to write this data.append('id', this.state.data.employee_Id) for more number of fileds I have 70 such field any better ways ?

Sachin Muthumala · Accepted Answer · 2020-06-19 10:01:36Z

0

Use FormData and append the file that you want to upload,

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

axios.put(apiEndpoint+'/update/'+this.props.match.params.id+'/basic-details', data)

try to do REST API using post method except put.

answered Jun 19, 2020 at 10:01

Sachin Muthumala

7651 gold badge9 silver badges18 bronze badges

4 Comments

Vinod Kumar Over a year ago

I need to append some more field values along with it formData.append(employee_Name,this.state.data.employee_Name);

Vinod Kumar Over a year ago

Why not to use PUT

Sachin Muthumala Over a year ago

Ok, you can append all the fields as you like. ``` data.append('file', this.state.data.employee_ResumeFile) data.append('employee_Name',this.state.data.employee_Name) data.append(.........) ```

Sachin Muthumala Over a year ago

PUT is meant as a method for "uploading" stuff to a particular URI or overwriting what is already in that URI. POST, on the other hand, is a way of submitting data RELATED to a given URI. Here you are uploading files with other data. Therefore I think the POST method is better than PUT.

Collectives™ on Stack Overflow

How to attach file upload with state values

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related