lightning:fileUpload component in lightning

This post explains how to use lightning:fileupload in lighting component

lightning:fileUpload component provides an easy and integrated way for users to upload multiple files. The file uploader includes drag-and-drop functionality and filtering by file types.

Limitations

• By default we can upload max 10 files, Admins can contact Salesforce to request a changeup to a maximum of 25 files uploaded at one time
• The maximum file size we can upload is 2 GB.
• Guest users can't add files to Communities

Note:
1. This component is not supported in Lightning Out or standalone apps.
2. we can't upload files with the following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg

File Uploder Example

FileuploaderComponent

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <div class="slds-theme_default">
        <lightning:fileUpload title="Upload Files"
                              name="fileuploader"
                              label="Upload Files"
                              recordId="{!v.recordId}"
                              multiple="true"
                              accept=".pdf,.png,.jpg"
                              onuploadfinished="{!c.afterFinish}"/>
    </div>
    
</aura:component>

FileUploaderComponentController.js

({
    afterFinish : function(component, event, helper) {
        //  Geting the list of uploaded files
        var uploadFiles = event.getParam("files");
        
        var strFileNames = '';
        
        // getting uploaded file names
        for(var i=0; i<uploadFiles.length; i++) {
            strFileNames += uploadFiles[i].name + ', ';
        }
        
        // Showing Success message
        component.find("notifLib").showToast({
            "variant": "success",
            "title": strFileNames,
            "message": uploadFiles.length + " Files are Uploaded Successfully!"
        });
        $A.get("e.force:refreshView").fire();
    }
})

Demo

Let us Know if you have any queries
Happy Learning!!