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?


(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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.