Fhreak's avatar

Input File Multiple, how to update input info after delete an item from array.

Hello, I have an input file multiple with preview on Vue before uploading to the server, when I delete one of the images of the array there is no problem, but the onchange method does not execute and in the view the input file still shows the same message and I can not Re-select the same image that I just deleted, try to force an onchange but I do not think I did it right because it did not work.

How to update the FileList knowing that can't be manipulated?. Any idea how I can handle that? please.

Working with Vue and Laravel.

<div id="root">
    
    <div >
        <input type="file" name="images[]" @change="imagesAdd" multiple>
    </div> 
    <div  v-for="(img, key) in image">
        <img  class="img-pre" :src="img">
        <button v-show="image" @click="removeImage(key)">Remover</button>
    </div>


</div>

var app = new Vue({

el: '#root',

data: {

    images: {},

    image: []

},

methods: {
    imagesAdd(e){
        var files = e.target.files || e.dataTransfer.files;

        this.images = [];
        Array.prototype.push.apply(this.images, files);
        if (!this.images.length)
            return;

        this.createImage(this.images);

    },

    createImage(file){

        for (var i = 0; i < file.length; i++) {

            var reader = new FileReader();
            var vm = this;

            reader.onload = (e) => {
                vm.image.push(e.target.result);
                console.log(vm.image);
            };
            reader.readAsDataURL(file[i]);
        }
        

    },


     removeImage(key){

        this.image.splice(key, 1);
        this.images.splice(key, 1);

        if(!this.image.length){

            this.$refs.im.value = '';

   

  }
 }


}   

});

0 likes
3 replies
aurawindsurfing's avatar

Not sure if you are using vue-js devtools for Chrome: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

Try running that and see if you are actually updating your array and the DOM. It seems like you update your array but not your view. This way you can also see why is the method: removeImage(key) not triggered.

Your code looks ok to me but devtool might give you some debugging info like for instance, I'm not sure if additional spaces will not couse the error while rendering that blade template:

<div v-for="(img, key) in image">

instead of:

<div  v-for="(img, key) in image">

Please or to participate in this conversation.