Upload Multiple Files Using Lightning File Upload Component

In Winter ’18 Salesforce released a new lightning component lightning:fileUpload, which 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.

File Upload Component Limits:

  • By default, you can upload up to 10 files simultaneously unless your Salesforce admin has changed that limit.
  • The org limit for the number of files simultaneously uploaded is a maximum of 25 files and a minimum of 3 files.
  • The maximum file size you can upload is 2 GB. In Communities, the file size limits and types allowed follow the settings determined by community file moderation.


  • This component is not supported in Lightning Out or standalone apps, and displays as a disabled input.
  • The file uploader cannot be used to upload files with the following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg.

In this article I will show you how you can upload multiple files using lightning file upload component, without writing the apex code.

FileUpload Component:
Create a new Lightning Component FileUpload.cmp.

<aura:component controller="FileUploadController" implements="force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId, forceCommunity:availableForAllPageTypes, force:lightningQuickAction" access="global">
    <lightning:fileUpload label="Upload File" multiple="true" accept=".pdf, .png" recordId="{!v.recordId}" aura:id="multifileUpload" onuploadfinished="{!c.handleUploadFinished}" />

FileUpload JavaScript Controller:
Now create below JavaScript FileUploadController.js controller for above FileUpload.cmp component.

    handleUploadFinished: function (cmp, event) {
        //Get the list of uploaded files
        var uploadedFiles = event.getParam("files");
        //Show success message – with no of files uploaded
        var toastEvent = $A.get("e.force:showToast");
            "title": "Success!",
            "type" : "success",
            "message": uploadedFiles.length+" files has been uploaded successfully!"
        //Close the action panel
        var dismissActionPanel = $A.get("e.force:closeQuickAction");

Steps to test the functionality:
Go to Setup || Object Manager || Select Object(For example Account) || Buttons, Links, and Actions || New Action || Create Quick Action

Now add the created Quick Action into Object Page Layout.
Go to Setup || Object Manager || Select Object(For example Account) || Page Layouts || Select Your Layouts (For example Account Layout) || Select Mobile & lightning Actions || Add the Quick Action into Salesforce Mobile & Lightning Experience Actions section.

Now, Open an account record click Upload File action from right upload files and try to upload file.

  • Sudhir

    Hi Biswajith ,

    where is the controller=”FileUploadController” for the lighting component. can you please check and upload.

  • Indrani Biswas

    Hi Biswajeet,

    I want to increase the number of file upload limit at a time from 10 to 20.
    Can you please comment on it ?

  • Ramesh Rage

    Hi Biswajeet,

    Thanks for the wonderful post, i have query regarding creating Action button & usage. created action button with the same steps proposed in article and added in the page layout under “Salesforce Mobile and Lightning Experience Actions”, but the “upload file” button didn’t appear in the top of the layout. It came under Feed quick actions along with “Poll”, “Email” ect. Is there a way to show quick action button at the top of the layout like classic detail buttons.

    • Hi Ramesh,

      As it is a Quick Action it will come in Quick Action Section. If you want to show on top of the page, Create a lightning component with a button only, On click of that button write your functionality and add that button to your lightning page layout top section.

      • Ramesh Rage

        Hi Biswajeet,

        i didn’t understood, can you post in detail. I have created custom lightning component and how to show it as button only.
        I want to show this component as button at the top along with “EDIT” button. i have tried using quick action button but didn’t worked.

  • Ankur

    It is coming as disabled in community custom component. Do you have any idea?

  • Aditya Patil

    How do we achieve this when we don’t have a record id? For example on a single page user is allowed to fill in the account fields and upload files which will then create the account and attach the uploaded files?

    • Here I’ve implemented force:hasRecordId interface to get the record Id. For your scenario you can first Insert the account record, then you can get the Id of inserted account and now you can attach the file with that account with account Id.