Uppy: Preview thumbnails for .png images are blank in Safari 10.1

[arturi]

[janko]

I'm experiencing the same bug. It seems to work on Chrome (sometimes 🤷‍♂️, I think it's due to the preview being generated asynchronously), but it never works on Safari, because it always wants to fetch the generated URL from the server.

I noticed that URL.createObjectURL is used for generating the URL. What is the advantage of using that over FileReader which generates blobs?

In any case, should we expose the preview as asynchronous? Meaning that instead of the current

img.src = file.preview

users would have to do

file.preview.then((src) => { img.src = src })

[goto-bus-stop]

If we used a FileReader to generate a blob we would still have to (resize and) display it somehow, so AFAIK we'd have to use a URL.createObjectURL call anyway so we could use the blob in an <img src={url} />.

I think file.preview being a Promise would be more difficult to deal with inside the UI. Our entire render is sync atm and dealing with async things inside there could be complicated.

sorry I don't have any more useful input, I don't have a Mac to try this out on :(

[janko]

To provide an update on this. I noticed that the thumbnail generation is what's flaky, not URL.createObjectURL itself. And I'm now seeing it on Chrome too, regularly. I have set thumbnailGeneration: false, which also uses URL.createObjectURL, and now images always display correctly.

I think file.preview being a Promise would be more difficult to deal with inside the UI. Our entire render is sync atm and dealing with async things inside there could be complicated.

When thumbnailGeneration is true (default), generating the preview seems to actually be async (Utils.createThumbnail returns a Promise). And that's the issue I think, the resized preview might not be ready when the upload is finished (e.g. when testing locally and the upload itself is really fast). What I'm getting is that file.preview is undefined, and I can "fix" it by adding a setTimeout.

To be clear, I'm not using any UI plugin, I'm assigning the preview myself on an image tag. In that case it would be nice to have a Promise.

In any case, what do you think about having thumbnailGeneration: false as a safe default? TBH to me there is no difference whether the image preview is resized or not.

[goto-bus-stop]

Oh! Thanks for the update.

To be clear, I'm not using any UI plugin, I'm assigning the preview myself on an image tag. In that case it would be nice to have a Promise.

I see, that makes sense. We could emit an event once a thumbnail is available to make this a bit easier. Since UI plugins rerender automatically on state changes we didn't need it for those. I suppose the issue in the OP is different since it only applies to PNGs.

TBH to me there is no difference whether the image preview is resized or not.

We had better results with the thumbnails for very large images. Large images would load in slowly, row-by-row when not resized, but pop in all at once when resized, which seemed like a better experience. GIF images also show up animating if they are not first rendered to a canvas. Maybe those things are not worth the trouble?

[janko]

We had better results with the thumbnails for very large images. Large images would load in slowly, row-by-row when not resized, but pop in all at once when resized, which seemed like a better experience. GIF images also show up animating if they are not first rendered to a canvas. Maybe those things are not worth the trouble?

Ok, now that you say it, thumbnailGeneration: true sounds like a good default. Thank you for thinking about these edge cases!

We could emit an event once a thumbnail is available to make this a bit easier.

That sounds like a good solution to me 👍

[arturi]

Should be fixed in the latest 0.23.0: https://www.npmjs.com/package/uppy. Thanks!