Lightning Component using 'renditionDownload' to view files (img/doc/xlxs/etc), is not immediately available after upload

Question

We have a Lightning Component where a User uploads a file (Excel, Word, Image) and then the page will update with a preview of the file.

We are using ContentVersion/ContentDocumentLink to store the file. After the file in inserted, we would display it using:

     <img src="{!'/sfc/servlet.shepherd/version/download/'+ v.LatestPublishedVersionId }" />

This worked well for images, but not for any other file type.

So I looked into:

     <img src="{!'/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&amp;versionId='+ v.LatestPublishedVersionId }" />

This was nice. All file types get a preview.

But! The first rendering immediately after the upload always shows a 'missing/broken image' type icon. The preview only would correctly appear after reloading the page, a few seconds later. This seems to only be happening for non-image type file, so I guess there is a conversion process that takes a few seconds to complete.

---

Any suggestions on how to handle this?

I dont have a lot of experience with JavaScript, but an artificial pause seems like it may be a bad idea. Is there a way to tell when the renditionDownload is available? Or is there a better way to preview the files?

Answer 1

(The post below actually doenst work. CSV will cause a 404, because that file type never generates a preview. But PDF/xlxs/doc etc will show a broken link, but not a 404... )

For my purpose, the onerror event worked. There are many examples on stack exchange.

<img  onerror="{!c.imageError}" src="{!'/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&amp;versionId='+ v.LatestPublishedVersionId }"

If there is a '404 image not found' error, the event fires, and then I hide the div containing the Image, and unhide a div with a message to the effect of 'Your image preview will be available shortly'. Then the next time the user comes back, or refreshes the page, the image should appear.

I figure I could do some kind of polling or reloading the image every second to check if the 404 Error still exists, but Im worried that may lead to other browser issues. I may look for a better solution later, but this User Experience is more acceptable than a broken image.