Uploading file and input data using axios in laravel and vue

Question

I have been trying to upload a file with form data using axios in vue js with laravel backend. There are few solutions out there but I am not being able to make them work.

So here what I am trying to do. Here is my data in vue js and I am binding them with v-model.My form submission method and it's code

let formData = new FormData();
var file = document.querySelector('#report');
formData.append("file", file.files[0]);
formData.append('someName','someValue');

axios({
         method: 'put',
         url: self.sl+'/seller/upflv',
         data: formData,
   })

In laravel backend I am loggin using

 \Log::info($request->all());

And I get an empty array in my log file.

Here is what I can see in my chrome network

------WebKitFormBoundary0Q7B39baNw6AJXDA
Content-Disposition: form-data; name="file"; filename="d.PNG"
Content-Type: image/png
------WebKitFormBoundary0Q7B39baNw6AJXDA
someValue
------WebKitFormBoundary0Q7B39baNw6AJXDA--

Any help or explanation would be extremely helpful. Thank you.

Try to log $request->hasFile("file");.

Sérgio Reis
– Sérgio Reis

2018-01-15 10:11:41 +00:00
Commented Jan 15, 2018 at 10:11 — Sérgio Reis
– Sérgio Reis, Commented Jan 15, 2018 at 10:11
But what about my input? sameName?

Hkm Sadek
– Hkm Sadek

2018-01-15 10:15:43 +00:00
Commented Jan 15, 2018 at 10:15 — Hkm Sadek
– Hkm Sadek, Commented Jan 15, 2018 at 10:15
yes, it's empty

Hkm Sadek
– Hkm Sadek

2018-01-15 10:16:45 +00:00
Commented Jan 15, 2018 at 10:16 — Hkm Sadek
– Hkm Sadek, Commented Jan 15, 2018 at 10:16

Sérgio Reis · Accepted Answer · 2018-01-15 10:26:02Z

11

Ran into a problem like that some time ago.

check this https://github.com/laravel/framework/issues/13457#issuecomment-239451567

Try to send it like this:

let formData = new FormData();
var file = document.querySelector('#report');
formData.append("file", file.files[0]);
formData.append('someName','someValue');
formData.append('_method', 'PUT'); // ADD THIS LINE
axios({
         method: 'post', //CHANGE TO POST
         url: self.sl+'/seller/upflv',
         data: formData,
   })

answered Jan 15, 2018 at 10:26

Sérgio Reis

2,5232 gold badges22 silver badges32 bronze badges

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

3 Comments

Hkm Sadek Over a year ago

Is it possible to append object instead of key value pairs? Because I have already data object with all key value.

Sérgio Reis Over a year ago

Sure, make sure to send it as json JSON.stringify(yourData); and in the controller run a json_decode() on it. w3schools.com/js/js_json_stringify.asp , php.net/manual/en/function.json-decode.php

S M Iftakhairul Over a year ago

You saved my day. @SérgioReis

Collectives™ on Stack Overflow

Uploading file and input data using axios in laravel and vue

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related