Vue-dropzone: Unable to add already uploaded files to dropzone.

[plexus77]

I needed to add to the DropZone component so that it emits an event once it's mounted, this way I can add files that have already been uploaded to the drop zone otherwise I was getting caught in a race condition.

ie At the end of the mounted method inside the dropzone component

vm.$emit('vdropzone-mounted')

Then in the parent component I have something like this...

<DropZone ref="dropzone" @vdropzone-mounted="loadExistingFiles"></DropZone>

And the method...

loadExistingFiles() {
    let that = this
    _.each(this.files, function(el) {
        var mockFile = { name: el.filename, size: el.size };
        that.$refs.dropzone.dropzone.emit("addedfile", mockFile);
        that.$refs.dropzone.dropzone.emit("thumbnail", mockFile, el.thumbnailS3);
        that.$refs.dropzone.dropzone.emit("complete", mockFile);
    })
}

Not sure if there is a better way to do this.

[vrajroham]

Hey @plexus77 , Simple way can be as below,

for (var i = 0; i < this.files.length; i++) {
    var mockFile = { name: "File_" + i, size: 526 };  //Any name, size.
    this.$refs.dropzone.manuallyAddFile(mockFile,this.files[i]);
}

[plexus77]

@vrajroham didn't see that method cheers, was using an older version :)

[plexus77]

Hey @vrajroham actually there is still a race condition. I am doing an ajax call to the server in the mounted method in the parent component to retrieve the list of files already uploaded, after completion I call 'this.$refs.dropzone' and it is undefined.

[vrajroham]

This error usually occurs when dom is loaded before your ajax response is received. Even there would be any other issue we will see. Could you share the snippet of ajax call? So I can explain you better.

[plexus77]

You mean that the Ajax call in the parent mounted method is completing before the child component is mounted? There is still the potential for a race condition.

mounted() { let that = this api.jobsGet(this.id).then(function(response) { store.commit(JOBADD, response.data.job) _.each(response.data.job.files, function(el) { var mockFile = { name: el.filename, size: el.size } that.$refs.dropzone.manuallyAddFile(mockFile, el.thumbnailS3) }) }) }

I added some console logs to the parent and dropzone (child) mount methods and also when the ajax call finishes, as expected they appear in this order.

1. Parent Mounted.
2. Ajax Call completed.
3. Dropzone Component Mounted.

The only foolproof solution I can think of is to emit an event from dropzone when it mounts or pass the already uploaded files into a property so that the dropzone knows to load them.

[vrajroham]

Your solution sounds great. I'll look into implementing event for such case.

I got same problem but in case of other library. This solution may help in your case. IT'S NOT RECOMMENDED!

Scenario and Workaround

I was loading the images via ajax call and trying to initiate a lightbox. Everytime I was getting error as .....undefined. But I was able to receive images from server. What I did is set timeout of 100ms before initializing the light box, keeping everything same. It worked!

Try to set file manually after some minimum timeout. Hope this work around helps you.

Although I'll do some hands on on your suggestion, keep issue open

[vrajroham]

@plexus77 Once newer version is released check with your suggested method.

[vesper8]

Got this to work but one thing that wasn't working is that it wasn't working the maxFiles limit. I got this to work by adding this code:

  mounted() {

    for (var i = 0; i < this.user.images.length; i++) {

      var mockFile = {id: this.user.images[i].id, name: this.user.images[i].name, size: this.user.images[i].size};

      this.$refs.myDropzone.manuallyAddFile(mockFile, this.user.images[i].url);

      if (this.$refs.myDropzone.dropzone.options.maxFiles > 0) {
        this.$refs.myDropzone.dropzone.options.maxFiles--
      }
    }
  },

[vrajroham]

@vesper8. Make sure to remove the workaround you implemented for maxFiles if you update library to latest version. (Yet not released updated version) Because the workaround you implemented is updated in newer version. Right now the problem is Repo's documentation is updated but yet repo is not published to npm so npm it is serving old version.

keep note of your workaround

[rowanwins]

Hi @plexus77

Sorry for weighing in late here, my other suggestion would be to perhaps to use the use the .nextTick method or perhaps a watch method.

Or even better if you're using vue-router you could use the [data fetching] (http://router.vuejs.org/en/advanced/data-fetching.html) approach

[plexus77]

Hi @rowanwins

Thanks for the suggestions, they all seem pretty viable....

I hadn't seen the vue-router data fetching stuff before. Sounds like a good suggestion.

[rowanwins]

Im going to close this issue because it's more about state management now of the application but hopefully there are enough suggestions to go on with