Uppy: Access to Thumbnail file

[jazkh]

Hi,
I am using Uppy Dashboard Modal.
How can I access files Thumbnail (that are displayed on dashboard) after the files are successfully uploaded? I want to display that thumbnail that was uploaded to be used in my app page.

Another question: If I cancel/remove a file or the file is not uploaded for any reason, why uppy does not clean the blob url using URL.revokeObjectURL?
.... and if I add the same file few times in dashboard, it creates a new blob URL for the same file and taking up memory space.
It should detect that the same file is loaded in the dashboard and use the previous blob URL unless the browser is closed or blob file is cleaned?

Thank you.

[goto-bus-stop]

Hmm, we should clean them up in a file-removed event handler in ThumbnailGenerator. I thought we did that already!

You can do uppy.getFile(id).preview to get the thumbnail blob URL, I guess, but when we clean them up correctly you can't use that anymore. Those thumbnails are not uploaded anywhere so the blob URL is the only way.

[jazkh]

@goto-bus-stop

Also clean the original file size blob URL. Uppy creates 2 blob URLs for a single file. I don't know why it creates 2 when only 1 is needed.

how about if we could get some option to use the generated thumbnail file to upload it on our backend server ( with adding an extra option to specify the size of that thumbnail would be great as well ) ?

for e.g. I want to upload the original file along with the thumbnail (after the original file is uploaded successfully) and then remove the blob URL for the thumbnail that is used in dashboard. Adding an extra option to specify the size of that thumbnail before uploading would be great as well

At the moment, I have to create a thumbnail on my backend nodejs server and fetch it to display on my web app. This creates 3 blob URLs for a single file. 2 created by uppy (original file size + thumbnail size) and another 1 by backend server. You see one single file is consuming so much memory unnecessarily.

[arturi]

why uppy does not clean the blob url using URL.revokeObjectURL

I believe it does:

https://github.com/transloadit/uppy/blob/3904879e8314615d113d7108f7feaa4a323979cf/packages/%40uppy/core/src/index.js#L504-L507

[sponnet]

I'm trying to access the client-side thumbnails too.

Accessing uppy.getFile(id).preview on the file-added or upload-success event that uppy emits is subject to a race condition.

Because looking at the thumbnailer code - it waits for the file-added event to put the thumbnail generation in a queue. But until the queue is processed (which is an async operation) - the preview property remains null.

A solution might be to return a promise in the preview property when it's queued - it will work in the rendering template, but will also enable the uppy.getFile(id).preview to return a predictable output. uppy expects preview to be a string. This will not work.

[sponnet]

https://github.com/transloadit/uppy/pull/1090 could make the above suggestion work after all - we can refactor the object URL cleanup there.

[arturi]

@sponnet after https://github.com/transloadit/uppy/pull/970 there are events emitted when thumbnail is generated, would that solve your problem? See for docs (we should update docs): https://github.com/transloadit/uppy/issues/946#issuecomment-425979601

[sponnet]

Definitely!

FYI - I have solved it for now by wrapping a promise around a new previewPromise property

  addToQueue(item) {
    var preview = new Promise((resolve, reject) => {
      this.queue.push({ item: item, resolve: resolve });
      if (this.queueProcessing === false) {
        this.processQueue();
      }
    });
    this.uppy.setFileState(item.id, {
      previewPromise: preview
    });
  }

https://gist.github.com/sponnet/39d190316a406b6607e1857f4b1c97d1#file-thumbnailgenerator-js-L162-L188

and then use it as follows ( from the handler of upload-success in my case )

var uploadedFile = this.uppy.getFile(file.id);
uploadedFile.previewPromise.then(preview => {
   // preview now contains the blob URL
}

my broader use-case was to to upload the client-side generated thumbnail images to my backend ( in my case to IPFS )

Maybe it's a long stretch, but having an uploadThumbnails={true} in the Dashboard would be an awesome option imo.

[superandrew213]

👍 for uploadThumbnails={true}

https://github.com/transloadit/uppy/issues/1212