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 Post Thumbnail

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.

Image

Thumbnail Image: Nil

No image uploaded

After uploading.

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.

Image

If y'all have any question Inquire Me

Cheers for Reading :)

Write a comment for suggestions and hit the heart icon.


comeausirsenes.blogspot.com

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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel