Kishore
Kishore I am a Salesforce developer and a so-called blogger at SalesforceLwc.in. I love learning and sharing. SalesforceLWC aims to share relevant knowledge, examples and scenarios for understanding Salesforce Lightning Web Components and AURA.

Custom Files Uploader for Salesforce Lightning Components


Custom Files Uploader for Salesforce Lightning Components

Summary

In this post we are going to see a Custom Files Uploader component. Which can be reused in any other component.

Component:

FilesUploader.cmp:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
 
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="accept" type="List" default="['.jpg', '.jpeg', '.pdf', '.zip']"/>
    <aura:attribute name="multiple" type="Boolean" default="true"/>
    <aura:attribute name="disabled" type="Boolean" default="false"/>
    
    <aura:registerEvent name="AttachmentUploaderEvent" type="c:AttachmentUploaderEvent"/>
    <aura:registerEvent name="updateAttachmentsAppEvent" type="c:updateAttachmentsAppEvent"/>
    
    <lightning:fileUpload multiple="{!v.multiple}" 
                          accept="{!v.accept}" 
                          recordId="{!v.recordId}" 
                          onuploadfinished="{!c.handleUploadFinished}" />
    
    
</aura:component>


FilesUploder.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
({
    handleUploadFinished : function(component, event, helper) {
        var uploadedFiles = event.getParam("files");
        var documentId = uploadedFiles[0].documentId;
        var fileName = uploadedFiles[0].name;
        console.log("In ");
        for(var i = 0; i < uploadedFiles.length; i++){
            console.log(uploadedFiles[i].name);
        }
        
        var toastEvent = $A.get("e.force:showToast");
        for(var i = 1; i < uploadedFiles.length; i++){
            fileName = fileName + ','+''+ uploadedFiles[i].name;
        }
        console.log("Names::::::"+fileName);
        
        toastEvent.setParams({
            "title": "Success!",
            "message": "File(s) "+ fileName +" Uploaded successfully.",
            "type" : "SUCCESS"
        });
        toastEvent.fire();
        
        
        var attachmentUploaderEvent = component.getEvent("AttachmentUploaderEvent");
   attachmentUploaderEvent.setParam("Uploaded", "Success");
         attachmentUploaderEvent.fire();
        
        
        var updateAttachmentsAppEvent = component.getEvent("updateAttachmentsAppEvent");
         updateAttachmentsAppEvent.fire();
        /*$A.get('e.lightning:openFiles').fire({
            recordIds: [documentId]
        });*/
        
    }
})


This component is a reusable component and can be used in any component and upload files to any record just by specifying the Record Id and multiple = ‘true’ or ‘false’. Specify the attribute multiple = ‘true’ or ‘false’ as true if you want to upload multiple files and false when you want to restrict files to be uploaded to only one. It also has an event that fires when files are successfully uploaded.

FilesUploaderEvent.evt:

1
2
3
<aura:event type="COMPONENT" description="Event template">
    <aura:attribute name="Uploaded" type="String"/>
</aura:event>


Hope this post helped you gain some knowledge, If you like the content

please don’t step back to like my page and leave your feedback, It will motivate me to make more posts. Do subscribe, for getting latest updates directly in your inbox.