You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Uploading Multiple Files in Lightning


This article will show you how without writing the apex code, you can upload multiple files using lightning tags only. Lightning component provides an easy and integrated way for users to upload multiple files. By using this technique, you can upload up to 10 files simultaneously. 

Create Lightning Component:  

Step 1:Open Developer Console and create a new Lightning Component  

Component: [LoadComponent.cmp] 

<aura:component implements=”force:appHostable,   

                                flexipage:availableForAllPageTypes,   

                             flexipage:availableForRecordHome,   

                                 force:hasRecordId,   

                                  forceCommunity:availableForAllPageTypes,   

                                  force:lightningQuickAction”   

                        access=”global” >   

<lightning:fileUpload label=”Upload files”   

                               multiple=”true”   

                              accept=”.pdf, .png”   

                              recordId=”{!v.recordId}”   

                              aura:id=”multipleUpload”   

                             onuploadfinished=”{!c.handleUpload}” />   

   </aura:component>   

Step 2:  By clicking on Controller from the right sidecreate a JavaScript Controller for the component 

JavaScript Controller: [LoadComponentController.js] 

({   

handleUpload: 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”);  

// Displays user friendly message to user 

toastEvent.setParams({   

“title”: “Success!”,   

“type” : “success”,   

“message”: uploadedFiles.length+” files has been updated successfully!”   

});   

toastEvent.fire();      

$A.get(‘e.force:refreshView’).fire();   

// Refresh the page  

// Close the action panel   

var dismissActionPanel = $A.get(“e.force:closeQuickAction”);   

dismissActionPanel.fire();   

},     

}) 

Step 3: In this step, create a Lightningquick action button 

Go to Setup –> Object Manager –> SelectObject(For example Opportunity–> Buttons, Links, and Actions –> New Action –>.

Step 4: We need to add this Quick action into Object Page Layout on this step. 

Go to Setup –> Object Manager –> SelectObject(For example Opportunity) –> Page Layouts –> Select Your Layouts (For example opportunity Layout) -> Select Salesforce1 and Lightning from Left Panel and add your Quick Action into Salesforce1 and Lightning Experience Actions section

Step 5In this step, Open an Opportunity record click Upload Files action from right upload files.

Limitations:  

  • 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 1 file. 
  • The max size you can upload is 2 gigabytes. 
  • In Communities, the file size limits and types allowed follow the settings determined by community file moderation. By default, guest users can’t upload files. You can enable the org preference Allow site guest users to upload files. 
  • This component is not supported in Lightning Out or standalone apps and displays as a disabled input.