0

I want to show a photo, like an Id photo that is attached to a custom record. I've tried notes and attachments as well as files to upload the photo file. I need to show the photo in an lwc. I've tried using the img tag with some various ways to retrieve the attached photo with no luck yet. . .

js:

@wire(getIdPhoto, { evaluatorId : '$evaluatorId' })
idPhotoDetails({ data, error }){
    if(data){
        this.idPhoto = data;
        this.photoUrl = data[0].VersionDataUrl+ '?thumb=THUMB240BY180'; 
        console.log('this.idPhoto ----- ', this.idPhoto);

    }else if(error){
        console.log('ERROR ----- ', JSON.stringify(error));

    }
}

apex:

@AuraEnabled(cacheable=true)
public static list<ContentVersion> relatedFiles(String evaluatorId){
    list<id> lstConDocs = new list<id>();
    for(ContentDocumentLink cntLink : [Select Id, ContentDocumentId From ContentDocumentLink Where LinkedEntityId = :evaluatorId]) {
        lstConDocs.add(cntLink.ContentDocumentId);
    }
    if(!lstConDocs.isEmpty()) {
        return [SELECT Id, Title, ContentDocumentId, VersionDataURL, ContentUrl FROM ContentVersion WHERE ContentDocumentId IN :lstConDocs];
    }
    else {
        return null;
    }

}

HTML:

            <div class="slds-grid" >
                <div class="slds-col slds-size_8-of-12">
                    <img src={photoUurl} height="100px" width="100px"></img>
                </div>
            </div>

Is this a viable approach? (currently I just get an empty image100px by 100px) or is there a better way?

console:

this.idPhoto -----  
Object { Id: "0683S000001fTk1QAE", Title: "placeholder id photo", ContentDocumentId: "0693S000001fZoIQAU", ContentSize: "7666", VersionDataUrl: "https://caloes--sap.sandbox.my.site.com/sap/sfc/servlet.shepherd/version/download/0683S000001fTk1" }
​
ContentDocumentId: "0693S000001fZoIQAU"
​
ContentSize: "7666"
​
Id: "0683S000001fTk1QAE"
​
Title: "placeholder id photo"
​
VersionDataUrl: "https://xxxxxx--sap.sandbox.my.site.com/sap/sfc/servlet.shepherd/version/download/0683S000001fTk1"
​
<prototype>: Object { … }
sapViewEvaluatorBadge.js:1:3846
this.photoUrl -----  https://xxxxxx--sap.sandbox.my.site.com/sap/sfc/servlet.shepherd/version/download/0683S000001fTk1?thumb=THUMB240BY180

2 Answers 2

1

You could convert the photo in base64 and use that data in the src attribute.
The src attribute can hold a Data URL in format data:[<mediatype>][;charset=<character set>][;base64].

  • The mediatype is a MIME type string, such as image/jpeg for a JPEG image file, that's why I'm going to retrieve the File Extension from ContentDocument.
  • You could use EncodingUtil.base64Encode to encode the blob of the photo and since it outputs an utf-8 string, that will be the charset.

You need a single SOQL since from ContentDocumentLink you could go up to ContentVersion. Moreover I added LIMIT 1 since you only use the first file.

APEX:

@AuraEnabled(cacheable=true)
public static String relatedFiles(Id evaluatorId){
    List<ContentDocumentLink> contentDocumentLinks = [SELECT ContentDocument.FileExtension, ContentDocument.LatestPublishedVersion.Title, ContentDocument.LatestPublishedVersion.VersionData
                FROM ContentDocumentLink
                WHERE LinkedEntityId = :evaluatorId
                LIMIT 1];

    String base64Data;
    if(!contentDocumentLinks.isEmpty()) {
        ContentDocumentLink cdl = contentDocumentLinks[0];
        base64Data = 'data:image/' + cdl.ContentDocument.FileExtension + ';charset=utf-8;base64, ';
        base64Data += EncodingUtil.base64Encode(cdl.ContentDocument.LatestPublishedVersion.VersionData);
    }
    return base64Data;
}

JS:

@wire(getIdPhoto, { evaluatorId : '$evaluatorId' })
idPhotoDetails({ data, error }){
    if (data) {
        this.photoUrl = data; 
     }else if(error){
        console.log('ERROR ----- ', JSON.stringify(error));
    }
}

HTML:

<div class="slds-grid" >
    <div class="slds-col slds-size_8-of-12">
        <img src={photoUurl} height="100" width="100">
    </div>
</div>

Please note that height and width are always in pixel and must hold an integer without a unit, so 100 instead of 100px

1

You should be able to do this, but your URL is incorrect.

You want something like: /sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId={yourContentVersionId}

This won't work in an unauthenticated site. The previews don't work there.

3
  • https://xxxxxx--sap.sandbox.my.site.com/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=0683S000001fTk1QAE **still no photo :(
    – mackmama
    Jun 16, 2023 at 2:18
  • @mackmama does it work in salesforce? (not in a site?)
    – Nick C
    Jun 16, 2023 at 3:30
  • in Site, no. Internally. . . not sure. having other issues there. I'll update if I figure it out
    – mackmama
    Jun 16, 2023 at 11:45

You must log in to answer this question.

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