Kishore I am a Salesforce developer and a so-called blogger at I love learning and sharing.

Custom Files Uploader for Salesforce Lightning Components

Custom Files Uploader for Salesforce Lightning Components


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



<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}" 
                          onuploadfinished="{!c.handleUploadFinished}" />


    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++){
        var toastEvent = $A.get("e.force:showToast");
        for(var i = 1; i < uploadedFiles.length; i++){
            fileName = fileName + ','+''+ uploadedFiles[i].name;
            "title": "Success!",
            "message": "File(s) "+ fileName +" Uploaded successfully.",
            "type" : "SUCCESS"
        var attachmentUploaderEvent = component.getEvent("AttachmentUploaderEvent");
   attachmentUploaderEvent.setParam("Uploaded", "Success");;
        var updateAttachmentsAppEvent = component.getEvent("updateAttachmentsAppEvent");;
            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.


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

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.