Vue / Laravel - Formdata.append displaying null value on edit

Question

I have a working post method for storing a photo + the first name of the user.

 // front-end
 let formData = new FormData();
 formData.append('photo', this.tableItem.photo);
 formData.append('first_name', this.tableItem.first_name);
 await axios.post('/api/employees', formData, { headers: { 'Content-Type': 'multipart/form-data' }})

 // back-end
 $employee = Employee::create([
  'first_name' => $request->first_name,
 ]);

Now if I edit the first_name, the put method is a success but the value is displayed as blank

  Object.assign(this.tableData[this.editedIndex], this.tableItem)
  let formData = new FormData();
  formData.append('photo', this.tableItem.photo);
  formData.append('first_name', this.tableItem.first_name);
  await axios.put('/api/employees/' + this.tableItem.id, formData, { headers: { 'Content-Type': 'multipart/form-data' }})

  $employee->update([
    'first_name' => $request->first_name,
  ]);

If I removed the formData and replaced it with this.tableItem everything is working as intended. Even if a I put an await for Object.assign, the new value input is still not captured.

Hafez Divandari · Accepted Answer · 2020-05-13 09:54:52Z

1

It is a known bug on PHP, Symfony and Laravel as well, a workaround is to append _method param with PATCH or PUT value to your formdata and use axios.post instead:

formData.append('_method', 'PUT');
await axios.post(
    '/api/employees/' + this.tableItem.id,
    formData,
    //{...

Check this issue on Laravel repo for more info: https://github.com/laravel/framework/issues/13457#issuecomment-340156084

answered May 13, 2020 at 9:54

Hafez Divandari

9,1375 gold badges51 silver badges66 bronze badges

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

1 Comment

Jim E Russel Over a year ago

So this has been a bug since way back. Thank you very much!

Collectives™ on Stack Overflow

Vue / Laravel - Formdata.append displaying null value on edit

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related