pass the value of a uploaded file photo in vuejs and Laravel - 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

Answer 1

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