How to get upload/delete and preview the files attachments through apex class uses of lightning:fileCard and lightning:fileUpload elements in Salesforce Lightning component

[vijayk3327]

In this post we are going to learn about How to get upload/delete and preview the files attachments through apex class uses of lightning:fileCard and lightning:fileUpload elements in Salesforce Lightning component

Requirement:- Upload the custom file on lightning component such like (jpg’, ‘jpeg’,’pdf’, ‘doc’) etc.. then iterate the list of attachment record and get preview (zoom), delete file dynamically.

👉 To get source code live demo link, Click Here.

Create Lightning Component
Step 1:- Create Lightning Component : UploadFileCmp.cmp

`<aura:component controller="uploadFileHandler" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="files" type="ContentDocument[]"/>
<aura:attribute name="recordId" type="string" default=""/>
<aura:attribute name="accept" type="List" default="['.jpg', '.jpeg','.pdf','.csv','.xlsx']"/>
<aura:attribute name="multiple" type="Boolean" default="true"/>
<aura:attribute name="Spinner" type="boolean" default="false"/>

<lightning:card>
    <div class="slds">  
        <lightning:notificationsLibrary aura:id="notifLib"/>
        <div class="contentbox">  
            <div class="slds-page-header header">Files ({!v.files.length})</div>  
            <div class="slds-grid">  
                <div style="width:100%">  
                    <center>
                        <lightning:fileUpload label="" multiple="{!v.multiple}"   
                                              accept="{!v.accept}" recordId="{!v.recordId}"   
                                              onuploadfinished="{!c.UploadFinished}" />  
                    </center>
                </div>  
            </div><br/> 
            <div class="slds-form--compound" style="position:relative">
                <table class="slds-table slds-table--bordered">  
                    <thead>  
                        <tr>  
                            <th></th>
                            <th>Title</th>  
                            <th>FileType</th>                    
                        </tr>  
                    </thead>  
                    <tbody>
                        <aura:iteration items="{!v.files}" var="f">  
                            <tr>  
                                <td><a href="javascript:void(0)" id="{!f.Id}" onclick="{!c.delFilesAction}">Delete</a></td>
                                <td><a href="" id="{!f.Id}" onclick="{!c.previewFileAction}">{!f.Title}</a></td>  
                                <td>{!f.FileType}</td>                              
                            </tr>  
                        </aura:iteration>  
                    </tbody>  
                </table>  
                <aura:if isTrue="{!v.Spinner}">
                    <div class="slds-spinner_container">
                        <div class="slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
                            <div class="slds-spinner__dot-a"></div>
                            <div class="slds-spinner__dot-b"></div>
                        </div>
                    </div>
                </aura:if>
            </div>
        </div>  
       <br/>
        <br/>

        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

        <br/><br/>
        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
                    <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
                    <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
                    <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
                    <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
                    <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
                    <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
            </div>
</div>

    </div>  
</lightning:card>      

</aura:component>`

Create JavaScript Controller
Step 2:- Create Lightning Component : UploadFileCmpController.js

` ({
doInit:function(component,event,helper){
helper.getuploadedFiles(component);
},

previewFileAction :function(component,event,helper){  
    var rec_id = event.currentTarget.id;  
    $A.get('e.lightning:openFiles').fire({ 
        recordIds: [rec_id]
    });  
},  

UploadFinished : function(component, event, helper) {  
    var uploadedFiles = event.getParam("files");  
    //var documentId = uploadedFiles[0].documentId;  
    //var fileName = uploadedFiles[0].name; 
    helper.getuploadedFiles(component);         
    component.find('notifLib').showNotice({
        "variant": "success",
        "header": "Success",
        "message": "File Uploaded successfully!!",
        closeCallback: function() {}
    });
}, 

delFilesAction:function(component,event,helper){
    component.set("v.Spinner", true); 
    var documentId = event.currentTarget.id;        
    helper.delUploadedfiles(component,documentId);  
}

})`

Create JavaScript Helper
Step 3:- Create Lightning Component : UploadFileCmpHelper.js

`({
getuploadedFiles:function(component){
var action = component.get("c.getFiles");
action.setParams({
"recordId":component.get("v.recordId")
});
action.setCallback(this,function(response){
var state = response.getState();
if(state=='SUCCESS'){
var result = response.getReturnValue();
component.set("v.files",result);
}
});
$A.enqueueAction(action);
},

delUploadedfiles : function(component,documentId) {  
    var action = component.get("c.deleteFiles");           
    action.setParams({
        "sdocumentId":documentId            
    });  
    action.setCallback(this,function(response){  
        var state = response.getState();  
        if(state=='SUCCESS'){  
            this.getuploadedFiles(component);
            component.set("v.Spinner", false); 
        }  
    });  
    $A.enqueueAction(action);  
}, 

})`

Step 4:- Create Lightning Component Style: UploadFileCmp.css

`.THIS .contentbox{
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-top: 1px solid #dddddd;
}

.THIS .header{
border-radius: 0px;
border-right: 0px;
border-left: 0px;
border-top: 0px;
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
}`

👉 To get source code live demo link, Click Here.