HOW TO MAKE A IMAGE PUBLIC ON GOOGLE UPLOAD
Upload Image, create public url and preview images in Lightning Web Component.
Posted on July 2, 2021 
Hey Trailblazers :)
In this blog post,
i. We're going to create a lightning component which provides a functionality to upload an epitome.
two. Create a public link of uploaded epitome.
3. Preview uploaded image and add public link to related parent record.
Sometimes nosotros have a requirement:
Nosotros need to add an image to Salesforce Object and we demand to save public link of that image in a field.
And we besides need to preview whatever uploaded image.
Have a look at post-obit epitome.
Thumbnail Image: Nil
No image uploaded
After uploading an epitome, I can accept public link in Thumbnail Image and able to preview uploaded.
What you'll Learn from Blog Postal service :)
ane. Upload file component.
ii. Difference between ContentVersion and ContentDistribution.
Start :)
Upload file Component:
<lightning-input type="file" label="Upload File"></lightning-input>
ContentVersion:
We use ContentVersion for inserting a file.
Check following code:
// inserting file ContentVersion cv = new ContentVersion(); cv.Title = strFileName; cv.PathOnClient = '/' + strFileName; cv.FirstPublishLocationId = idParent; cv.VersionData = EncodingUtil.base64Decode(base64Data); cv.IsMajorVersion = true; Insert cv;
ContentDistribution:
We use ContentDistribution for sharing a file. In ContentDownloadUrl we reference ContentVersionId for sharing.
Check following code:
ContentDistribution cdl = new ContentDistribution(); cdl.ContentVersionId = ContentVersionId; cdl.Name = 'PublicShare';
After sharing, We query ContentDownloadUrl field from ContentDownloadUrl
ContentDownloadUrl is public url.
Cord publicUrl = [SELECT DistributionPublicUrl, ContentDownloadUrl FROM ContentDistribution WHERE Id = :cdl.Id LIMIT 1].ContentDownloadUrl;
For Updating field, Nosotros add this publicUrl in field.
And for preview this image, We use following code:
<lightning-card title="Thumbnail Image of the Production" icon-name="utility:image"> <div style="width: auto;"> <template if:fake={information}> <i class="slds-text-color_error">No image uploaded!</i> </template> <template if:true={information}> <img src={data} width="150"> </template> </div> </lightning-card> All ready :)
I'm using Product2 Object in this blog and using thumbnailimage__c field on Product2 Object.
Final code :)
Create following Apex Class and LWC component.
Modify co-ordinate to your needs.
Apex Form: UploadImageCTRL
public inherited sharing class UploadImageCTRL { @AuraEnabled public static ContentVersion saveFile(Id idParent, Cord strFileName, String base64Data) { // Decoding base64Data base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-viii'); // inserting file ContentVersion cv = new ContentVersion(); cv.Championship = strFileName; cv.PathOnClient = '/' + strFileName; cv.FirstPublishLocationId = idParent; cv.VersionData = EncodingUtil.base64Decode(base64Data); cv.IsMajorVersion = true; Insert cv; render cv; } @AuraEnabled public static String releatedFiles(Id idParent){ listing<id> lstConDocs = new list<id>(); for(ContentDocumentLink cntLink : [Select Id, ContentDocumentId From ContentDocumentLink Where LinkedEntityId =:idParent]) { lstConDocs.add together(cntLink.ContentDocumentId); } if(!lstConDocs.isEmpty()) { ContentDistribution cdl = new ContentDistribution(); cdl.ContentVersionId = [SELECT Id, Title, ContentDocumentId FROM ContentVersion WHERE ContentDocumentId IN :lstConDocs LIMIT 1].Id; cdl.Name = 'PublicShare'; insert cdl; Product2 p = new Product2(); p.id = idParent; system.debug(idParent); p.thumbnailimage__c = [SELECT DistributionPublicUrl, ContentDownloadUrl FROM ContentDistribution WHERE Id = :cdl.Id LIMIT ane].ContentDownloadUrl; update p; organisation.debug(p.thumbnailimage__c); render [SELECT DistributionPublicUrl, ContentDownloadUrl FROM ContentDistribution WHERE Id = :cdl.Id LIMIT 1].ContentDownloadUrl; } else { return naught; } } } LWC: thumbnailImageUpload.html
<template> <div class="slds-box"> <div form="slds-box slds-filigree slds-gutters"> <div class="slds-col"> <lightning-card championship="Upload Thumbnail Image" icon-name="utility:paradigm"> <div style="margin-left:iv%"> <div> <lightning-input label="" name="file uploader" onchange={handleFilesChange} type="file"> </lightning-input> </div><br /> <div class="slds-text-body_small slds-text-color_error">{fileName} <template if:true={showLoadingSpinner}> <lightning-spinner culling-text="Uploading......" size="medium"></lightning-spinner> </template> </div><br /> <div> <template if:simulated={information}> <lightning-button class="slds-m-elevation--medium" label={UploadFile} onclick={handleSave} variant="brand" disabled={isTrue}></lightning-button> </template> <template if:true={data}> <lightning-button class="slds-k-top--medium" characterization="Alter Image" onclick={handleSave} variant="brand" disabled={isTrue}></lightning-button> </template> </div> </div><br /><br /> </lightning-menu> </div> <div grade="slds-col"> <lightning-bill of fare title="Thumbnail Image of the Product" icon-name="utility:paradigm"> <div style="width: car;"> <template if:false={data}> <i class="slds-text-color_error">No image uploaded!</i> </template> <template if:true={data}> <img src={information} width="150"> </template> </div> </lightning-card> </div> </div> </div> </template> LWC: thumbnailImageUpload.js
import { LightningElement, rail, api } from 'lwc'; import saveFile from '@salesforce/apex/UploadImageCTRL.saveFile'; import releatedFiles from '@salesforce/apex/UploadImageCTRL.releatedFiles'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; const columns = [ { label: 'Title', fieldName: 'Championship' } ]; consign default form ThumbnailImageUpload extends LightningElement { @api recordId; @runway columns = columns; @track data; @track fileName = ''; @track UploadFile = 'Upload Image'; @track showLoadingSpinner = faux; @track isTrue = fake; selectedRecords; filesUploaded = []; file; fileContents; fileReader; content; MAX_FILE_SIZE = 1500000; connectedCallback() { this.getRelatedFiles(); } handleFilesChange(event) { if (event.target.files.length > 0) { this.filesUploaded = event.target.files; this.fileName = result.target.files[0].name; } } handleSave() { if (this.filesUploaded.length > 0) { this.uploadHelper(); } else { this.fileName = 'Delight select file to upload!!'; } } uploadHelper() { this.file = this.filesUploaded[0]; if (this.file.size > this.MAX_FILE_SIZE) { window.panel.log('File Size is to long'); return; } this.showLoadingSpinner = truthful; // create a FileReader object this.fileReader = new FileReader(); // set onload function of FileReader object this.fileReader.onloadend = (() => { this.fileContents = this.fileReader.result; permit base64 = 'base64,'; this.content = this.fileContents.indexOf(base64) + base64.length; this.fileContents = this.fileContents.substring(this.content); // call the uploadProcess method this.saveToFile(); }); this.fileReader.readAsDataURL(this.file); } // Calling apex grade to insert the file saveToFile() { saveFile({ idParent: this.recordId, strFileName: this.file.proper name, base64Data: encodeURIComponent(this.fileContents) }) .then(issue => { window.console.log('result ====> ' + result); // refreshing the datatable this.getRelatedFiles(); this.fileName = this.fileName + ' - Uploaded Successfully'; this.UploadFile = 'File Uploaded Successfully'; this.isTrue = true; this.showLoadingSpinner = false; // Showing Success message after file insert this.dispatchEvent( new ShowToastEvent({ title: 'Success!!', bulletin: this.file.name + ' - Uploaded Successfully!!!', variant: 'success', }), ); }) .take hold of(error => { // Showing errors if whatever while inserting the files window.console.log(fault); this.dispatchEvent( new ShowToastEvent({ title: 'Error while uploading File', message: error.message, variant: 'error', }), ); }); } // Getting releated files of the current record getRelatedFiles() { releatedFiles({ idParent: this.recordId }) .then(data => { this.data = information; console.log(data); }) .take hold of(error => { this.dispatchEvent( new ShowToastEvent({ title: 'Error!!', message: error.bulletin, variant: 'error', }), ); }); } // Getting selected rows to perform any activity getSelectedRecords(event) { let conDocIds; const selectedRows = event.item.selectedRows; conDocIds = new Set(); // Display that fieldName of the selected rows for (let i = 0; i < selectedRows.length; i++) { conDocIds.add(selectedRows[i].ContentDocumentId); } this.selectedRecords = Array.from(conDocIds).join(','); window.panel.log('selectedRecords =====> ' + this.selectedRecords); } } LWC: thumbnailImageUpload.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>51.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
Deploy to the Org.
Edit any record page and drag information technology to details section.
Cheque following image for the reference.
If y'all have any question Inquire Me
Cheers for Reading :)
Write a comment for suggestions and hit the heart icon.
Source: https://heysalesforce.org/posts/upload-image-create-public-url-and-preview-images-in-lightning-web-component
0 Response to "HOW TO MAKE A IMAGE PUBLIC ON GOOGLE UPLOAD"
Post a Comment