Hello,
I've been working with jeffrey's Form.js for a while now without any issue. Until i had to add a input type file in my registration form for the user to upload an avatar while creating the account. So i had to adapt a little bit the form.submit() so that i can tell axios to use "multipart/form-data" like so :
let config = { headers: { 'Content-Type': 'multipart/form-data' } }
axios[requestType](url, this.data(), config)
The minute i've done that, the hole form stopped working. I had tried to troubleshoot the issue by doing a dd($request). And now i seems like $request is empty which was before that change to axios, filled with all the form fields as before.
So i asked our friend Google, and i found this interesting issue https://github.com/laravel/framework/issues/13457 which seems to be somehow related.
To be honest, i didn't quite understood why framework/issues/13457 status is closed. The workaround doesn't seems to be working. The only difference between the reported issue and my case, is that i use the post method to submit the form as they are using put/patch
I really tried my best to resolve this issue by my own. But i can't and now honestly i'm stuck :(
Not tried this but it seems like you need to do something like
let data = new FormData();
data.append('file', data.file); // change data.file to match your vue model
axios[requestType](url,data,{
headers: {
'content-type': 'multipart/form-data'
}
});
There is also medium tutorial that goes into more detail
https://medium.com/@ldiebold/ajax-file-upload-with-axios-and-laravel-a296bc51f81d
Thank you so much for your reply, i'll give it a try right now.
@Youssef_ - let me know if this solved you issue. I have not needed to add file uploads to my Vue project yet but it's one for next month's milestone!
Please or to participate in this conversation.