[Vuejs]-Pass the value of a uploaded file photo in vuejs and Laravel

by

0👍

You need to include the file’s input field and submit the FormData object you are creating.

Change your submit() function to something like this and HTML forms do not support PUT, PATCH or DELETE actions. So, when defining PUT, PATCH or DELETE routes that are called from an HTML form, you will need to sprrof it and add a hidden _method field to the form (https://laravel.com/docs/8.x/routing#form-method-spoofing):

formSubmit(){
            const ids = this.userId;      
           
            let currentObj = this;

            alert(this.editProfile.name);
            alert(this.editProfile.last_name);
            alert(this.editProfile.address);
            alert(this.editProfile.photo.name);

            let formData = new FormData();
            formData.append('photo', this.editProfile.photo.name);
            formData.append('name', this.editProfile.name);
            formData.append('lastName', this.editProfile.last_name);
            formData.append('address', this.editProfile.address);
            formData.append('file', document.getElementById('fileInputId').files[0]);
            console.log(formData.values);
            axios.post(`/api/profile/${ids}/update`, formData).then(response=>{
                console.log(response.data);
                currentObj.success = response.data.success;
               

            }).catch(error=>{
                console.log(error);
                currentObj.output = error;
            });
        },

Then to use put, add this to your form: <input type="hidden" name="_method" value="PUT">.

In your controller you can check to see if the file came through successfully with something like:

public function controllerMethod(Request $request)
{
    if($request->hasFile('file')) {
      dd('Success - there is a file.');
   }

    dd('Unsuccessful - there is no file');
}

This questions may help: How to send a file via Axios to Laravel

Leave a comment