Can you show your code please?
Jun 18, 2017
3
Level 3
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 = ''; } } }});
Please or to participate in this conversation.