pass the value of a uploaded file photo in vuejs and Laravel

Question

I want to upload my photo and pass the value to the laravel. I have this edit profile which my photo be uploaded. Now my problem is how will i able to pass the value of the photo to axios. Here is my code below

<template>
    <div class="card">
        <div class="card-header">Profile Form</div>
         <div class="card-body">
            <div class="container">
                 <div class="row">
                    <div class="col-sm">
                        <div v-show="updatePP" id="preview">
                            <img v-if="url" :src="url" />
                        </div>
                        <div v-show="pp" v-if="editProfile.profile_pic == NULL">
                             <img src="https://i.imgflip.com/4/d0tb7.jpg" />
                        </div>
                        <div v-else>
                             asasasas
                        </div>
                    </div>
                    <div class="col-sm">
                        <form @submit.prevent="formSubmit" enctype="multipart/form-data">
                        <div class="form-group">
                            <div class="form-row" >
                                <div class="col-lg-12">
                                    <label>First Name:</label>
                                    <br>
                                    <input type="text" id="name" name="name" class="form-control" v-model="editProfile.name" />  
                                </div>
                                <div class="col-lg-12">
                                    <label>Last Name:</label>
                                    <br>
                                   <input type="text" id="lastName" name="lastName" class="form-control" v-model="editProfile.last_name" />
                                </div>
                                <div class="col-lg-12">
                                    <label>Address:</label>
                                    <br>
                                    <input type="text" id="address" name="address" class="form-control" v-model="editProfile.address" />
                                </div>
                                <div class="col-lg-12">
                                    <label>Upload Profile:</label>
                                    <br>
                                    <input type="file" id="photo" name="photo" @change="onFileChange" />
                                </div>
                               
                                <div class="col-lg-12">
                                    <br>
                                    <br>
                                    
                                  
                                    <button type="submit" class="btn btn-success btn-lg">Update</button>
                                </div>                   
                                
                            </div>
                        </div>
                        </form>
                       
                    </div>
                   
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
           
            
            editProfile:{
                userId: this.$userId,
            },
            
            url: null,
            pp: true,
            updatePP: false,
            userId:this.$userId,
        }
    },

    mounted(){
        const url = window.location.href;
        const id = url.split("/").slice(4)[0];
        this.getEditProfile(id);
    },
    methods:{
        onFileChange(e){
            const file = e.target.files[0];
            this.url = URL.createObjectURL(file);
            this.editProfile.photo = file;

            this.updatePP = true;
            this.pp = false;
    
        },
        
        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);
            console.log(formData.values);
            axios.put(`/api/profile/${ids}/update`, this.editProfile).then(response=>{
                console.log(response.data);
                currentObj.success = response.data.success;
               

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

        updateProfile(id){
           
        },
        
        getEditProfile(id){
           axios.get(`/api/profile/${id}/edit`).then(response=>{
                this.editProfile = response.data;
                console.log(response.data);
           });
        }
    }
}
</script>

<style scoped>
    #preview {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #preview img {
        max-width: 250px;
        max-height: 250px;
    }
</style>

i am using the FormData() and i want the data to be pass to axios. Any help is muchly appreciated. TIA

Andrew · Answer 1 · 2021-03-22T14:18:23.203

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

can you update your code? it seems its not working when i pass the formData to axios — Programmer, Mar 21 '21 at 05:36
Hi why is my formData is empty when the data is passed tru laravel — Programmer, Mar 21 '21 at 11:41
Did you update your ```axios.put()``` to include the ```formData``` object instead of ```this.editProfile``` you were using before? — Andrew, Mar 21 '21 at 13:46
yes using your code in the comment axios.put(`/api/profile/${ids}/update`, formData) — Programmer, Mar 22 '21 at 07:51
others says the put in axios wont work instead use post. I will still to try that out — Programmer, Mar 22 '21 at 08:42
Yes I apologize, I did not notice that. I have updated my answer accordingly. — Andrew, Mar 22 '21 at 14:09

pass the value of a uploaded file photo in vuejs and Laravel

1 Answers1