Leff7's avatar
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

0 likes
0 replies

Please or to participate in this conversation.