Uploading Multiple Files in Lightning

Share on facebook
Share on twitter
Share on linkedin
This article will show you how without writing the apex code, you can upload multiple files using lightning tags only.

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.

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.