2

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)

1 Answer 1

0

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"/>

controller.js

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

  }

}
8
  • 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, 2017 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, 2017 at 3:03
  • @ATA1k added some more code .See if that helps Apr 25, 2017 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, 2017 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, 2017 at 12:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .