In a Lightning Component Im previewing a file immediately after upload:

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

After uploading a non-image file (doc/pdf/xlxs), the preview will initially display a broken image icon. My guess is that this is because the file takes a few seconds to be converted to an image.

A few seconds after the upload though, the image is available...

I would like to catch this, and display an alternate message if the preview is not yet available. I was hoping it would throw a 404 and use onError, but it doesnt produce an error. (A CSV file throws a 404, but it never generates a preview, so its never available)

Is there any way to detect this, in javascript or otherwise?


Edit - To clarify, I would like to be able to detect when the broken image icon is visible, and display an alternate Div with a nicer UI message. Not just the alternative text message (Thanks for the suggestion though)


The image tag in html has "alt" attribute .You can use that for your purpose

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

Update :

Looks like you can add an "onerror" and call a function so i will manipulate as below

<img src="{!'/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&amp;versionId='+ v.LatestPublishedVersionId }" alt="My message" onerror="{!c.showloading}" aura:id="test"/>


  showloading : function(component,event,helper){
     //Write a default image
    component.find("test").src = '/image loader'


  • Hmm, that does change the text when the image isnt available, but the broken/missing image icon is still there as well. I will do some more research on this route, to maybe tell when Alt is displayed vs the actual Image? – ATA1k Apr 25 '17 at 2:14
  • If you get a chance, I would really appreciate if you can take another look. Im looking to detect when when the image is not ready yet, and showing the broken image icon. I suspect this isnt possible since no error is thrown, but any confirmation or other ideas would be welcome. Thanks for your time. – ATA1k Apr 25 '17 at 3:03
  • @ATA1k added some more code .See if that helps – Mohith Shrivastava Apr 25 '17 at 3:14
  • 1
    Originally I tried onerror (I also updated my question now), and while it works with files that do not ever generate a preview (such as CSV), it seems that for non-image type files that do create a preview(Word/Excel/PDF), the onerror event is not fired. There is no 404. I think this is because the path is valid, but the preview is just not available for a few seconds. Image type files seem to be available immediately. – ATA1k Apr 25 '17 at 12:54
  • Interestingly enough, when I tried to upload a Word Doc into Salesforce File, it will show that its in a 'Processing' state, and preview is not yet available. I wonder if there is a way I can query that state with SOQL/Apex... – ATA1k Apr 25 '17 at 12:57

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.