Images array doesn't fill up

[Dach0]

I have implemented the latest version of this package in my project, and I'm using Vue2. This is my code

 <div class="row justify-content-center">
          <vue-upload-multiple-image
                       @upload-success="uploadImageSuccess"
                       @before-remove="beforeRemove"
                       @edit-image="editImage"
                        :dragText="'Prevuci slike ovdje'"
                        :browseText="'Ili pretraži (klik)'"
                        :markIsPrimaryText="'Označi kao primarnu'"
                        :primaryText="'Primarna slika'"
                        :maxImage=6
                        :popupText="'Ova fotografija će biti cover'"
                        :dropText="'Spustite slike'"
                        :data-images="images"
                    ></vue-upload-multiple-image>         
                  </div>                                             

I have images array in data, but when I upload the picture nothing happens. If I inspect images array is empty but in component In the older version, and another project, everything works, array is getting populated as I upload pictures. Did anything changed, should I do it manually, or something else is happening? Any ideas? Thanks in advance

[adhitirafr]

@Dach0 did you find the solution? I tried to outsmarting this problem by trying to add the images in the uploadImageSuccess() method with push() method.

... uploadImageSuccess(formData, index, fileList) { this.images.push(formData) }, ...

The images is pushed to array, but the images view disappeared. everytime "this." is called inside uploadIMageSuccess, the images keep disappearing.

I still don't know the best solution.

[adhitirafr]

this is the temporary solution. In the uploadImageSuccess(), put the fileList data manually into the image variable,

...
uploadImageSuccess(formData, index, fileList) {
   this.images = fileList
}
...

If you wanna remove the image, just do the same thing as the uploadImage,

beforeRemove (index, done, fileList) {
            console.log('index', index, fileList)
            var r = confirm("remove image")
            if (r == true) {
                this.images = fileList
                done()
            }
        },

[Dach0]

Hey @adhitirafr, I came to the same conclusion :) Did the same thing with images. What else I needed is to send all files at the same time....and that I've done as a workaround something like this: I've made a new variable in the data called imageFiles and wrote following code:

 uploadImageSuccess(formData, index, fileList) {
                    this.imageFiles.push(formData.getAll("file")[0]);
                    this.images = fileList;
               },
          beforeRemove (index, done, fileList) {
                    var r = confirm("Izbriši dokument");
                    if (r == true) {
                        console.log(fileList);
                        console.log(fileList[index].name);
                        var imgIndex = this.imageFiles.indexOf(fileList[index].name)
                        this.imageFiles.splice(imgIndex);
                        done();
                    } else {
                }
               },

p.s. Also, if there is a change in the highlighted picture, and you need it in the backend, I've used markIsPrimary event

 markIsPrimary(index, fileList){
             this.images = fileList;
         },

Best regards, Damjan

[anvarulugov]

@Dach0 thank you for the solution! In my case the indexes of fileList and imageFiles were not the same, I had to reverse imageFiles to splice the right image from imageFiles.

uploadImageSuccess(formData, index, fileList) {
                this.imageFiles.push(formData.getAll("file")[0]);
                this.images = fileList;
            },
            beforeRemove(index, done, fileList) {
                console.log('index', index);
                console.log(fileList);
                var r = confirm(__("Remove image?"))
                if (r == true) {
                    console.log(fileList);
                    console.log(fileList[index].name);
                    var imgIndex = this.imageFiles.reverse().indexOf(fileList[index].name)
                    this.imageFiles.splice(imgIndex);
                    done();
                } else {}
            },

[l9devz]

@edit-image="uploadImageSuccess" and add setTimeout inside function

uploadImageSuccess(formData, index, fileList) {
      setTimeout(() => {
        this.image = fileList;
      }, 1000)
},