Oct 16, 2016
0
Level 4
Vue/Laravel - uploading a file on update doesn't work
I have a component that works on create form, but not on an update form. The image is being shown in the update form, but when I try to upload it, in the backend, I don't get any file for the field 'image'
This is the component:
<template>
<div>
<div v-if="!image">
<h2>Select an image</h2>
<input type="file" @change="onFileChange">
</div>
<div v-else>
<img :src="image" />
<input type="file" name="image" style="display:none">
<button @click="removeImage">Remove image</button>
</div>
</div>
</template>
<script>
export default {
props: {
image: {
type: String,
default: ""
}
},
data() {
return {
formData:new FormData(),
file: null
}
},
methods: {
onFileChange: function onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
this.formData.append('file', files[0]);
this.file = files[0];
},
createImage: function createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = function (e) {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function removeImage(e) {
this.image = '';
}
}
}
</script>
And this is how I call it in the create view:
<image-upload></image-upload>
And this is for the update view:
<image-upload image="/uploads/{{ $magazine->image }}"></image-upload>
But, when I do dd($request->all()) in the update function in my controller I get this output:
array:8 [▼
"_method" => "PUT"
"_token" => "oNkMAyKsKsxOpqeonRDvyusqtFrfVgBEQOnyNrFw"
"image" => "1.png"
"name" => "Article name"
"summary" => ""
"visual_id" => ""
"spid_id" => ""
"files" => "1"
]
And for the create function where it actually works I get:
array:6 [▼
"_token" => "oNkMAyKsKsxOpqeonRDvyusqtFrfVgBEQOnyNrFw"
"name" => "Article name"
"summary" => ""
"visual_id" => ""
"spid_id" => ""
"image" => UploadedFile {#222 ▶}
]
I have also posted this question on stack overflow
Please or to participate in this conversation.