Uploader with existing images

[andrisi]

Sometimes you'd want to use the uploader when editing something, not creating a new item, so the uploader shall have a list of existing images. The question is how to specify this in the files array? I'd think just adding objects with a url property, but if I do so now it fails with an error as it's not prepared for this.

[thetutlage]

Can u share the error you receive?

[t2thec]

Thanks for plugin. Really nice!

I'm struggling with this to at the moment. Based the recommended way to accomplish this: https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

vue.common.js?e881:435 TypeError: Cannot read property 'bytesSent' of undefined

The only references I can find to bytesSent has to do with the uploadprogress function. I've tried faking it to no avail.

• Any ideas what might be causing this?
• Am I calling Dropzone correctly here?

init(uploader) {
    if(this.exisitingFiles)  this.addExisitingFiles(uploader);
},

addExisitingFiles(uploader) {
    _.each(this.exisitingFiles, (mockFile) => {

        // Call the default addedfile event handler
        uploader.uploader._uploader.emit("addedfile", mockFile);

        // And the thumbnail of the file:
        // uploader.uploader._uploader.emit("thumbnail", mockFile, this.$settings.image_route + mockFile.name);
        uploader.uploader._uploader.createThumbnailFromUrl(mockFile, this.$settings.image_route + mockFile.name, null, true);

        // Make sure that there is no progress bar, etc...
        uploader.uploader._uploader.emit("complete", mockFile);

        this.total_files_added++
    });

    uploader.uploader._uploader.options.maxFiles = (uploader.uploader._uploader.options.maxFiles - this.total_files_added);
},

[jchristopher]

Thank you so much for this thread! I was able to get beyond the bytesSent error by faking that as well. Here's the structure I'm using for a mockFile:

mockFile = {
  status: 'success',
  name: 'Image name',
  progress: 100,
  size: 100,
  bytesSent: 100,
  total: 100,
  upload: {
    bytesSent: 100,
    total: 100,
    image_route: 'http://example.com/image.jpg'
  }
}

I was getting an issue with this line:

uploader.uploader._uploader.createThumbnailFromUrl(mockFile, this.$settings.image_route + mockFile.name, null, true);

so I commented that out and instead used the image_route itself in my Vue-clip component template to use that instead of having Dropzone generate a new one from a URL.

[killua99]

In case you're dealing with electron-vue and want to show local files you could do the next.

                if (fs.existsSync(localFilePath)) {
                  let fileBase64 = 'data:' + fileDoc.mime_type + ';base64,' + fs.readFileSync(localFilePath, 'base64')
                  uploader.addedFile(mockFile)
                  uploader.uploader._uploader.createThumbnailFromUrl(mockFile, fileBase64, null, true)
                  uploader.uploader._uploader.emit('complete', mockFile)
                }

You could pass a direct base64 encoded file to show a thumbnail.

[scramatte]

It works for me.

But anybody know how can I append database id to the mockfile structure to be able to get it in on removed event?

Regards