function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
jatin parashar 11jatin parashar 11 

how to add image preview with image file in lwc

Deepali KulshresthaDeepali Kulshrestha
Hi jatin,

Please refer below code:
Aura component:-

<aura:component controller="AttachmentController" implements="flexipage:availableForRecordHome,force:hasRecordId" 

access="global" >
    <aura:attribute name="recordId" type="String" />
    <lightning:fileUpload label="Attach Picture"
                name="fileUploader"
                multiple="true"
                accept=".pdf, .png, .jpg"
                recordId="{!v.recordId}"
                onuploadfinished="{!c.handleUploadFinished}" />
</aura:component>


Controller class:


public class Attechment {
    @AuraEnabled
    public static void updatePicturePath(String recId){
        //In Lightning Experience, Attachments are stored in ContentDocuments
        ContentDocumentLink docLink = [ SELECT ContentDocumentId
                                       FROM ContentDocumentLink
                                       WHERE LinkedEntityId = :recId order by Id desc Limit 1];
        //ContentVersion Id uniquely identifies the attachment
        ContentVersion ver = [SELECT Id FROM ContentVersion Where ContentDocumentId = :docLink.ContentDocumentId];
        //Update the Picture_Path field with the url of the image
        Student__c speaker = [SELECT Id FROM Student__c WHERE Id = :recId];
        speaker.Picture_Path__c = '/sfc/servlet.shepherd/version/download/'+ ver.Id;
        upsert speaker;
    }
    
}



Handler js file:-

({
    handleUploadFinished: function (component, event) {
        // Get the list of uploaded files
        var uploadedFiles = event.getParam("files");
        //set action to call updatePicturePath method from Server-side controller
        var action = component.get("c.updatePicturePath");
        action.setParams({
            recId : component.get("v.recordId")
        });
        action.setCallback(this, function(a){
            if(a.getState() === "SUCCESS"){
                var resultToast = $A.get("e.force:showToast");
                resultToast.setParams({
                            "title": "Success!",
                            "message": uploadedFiles.length + "file uploaded successfully."
                        });
                resultToast.fire();;
            }
        });
        $A.enqueueAction(action);
    }
})




I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com
jatin parashar 11jatin parashar 11
no I want to do it in LWC. lightning web component
jatin parashar 11jatin parashar 11
IN lightning web component when i click on a button whose variant is base then a outline of blue colour appear everytime. how i remove it??