Multiple File Upload in Salesforce Lightning Component
In recent days, Salesforce came out with the lightning: fileUpload component – essentially a file uploader for uploading and attaching multiple files to records in an accessible, integrated way.
The uploader includes drag-and-drop functionality as well as filtering by file types. It saves us from writing complex code and as such, doesn’t come with limitations like heap sizes or issues with assigning permissions to custom developments.
Here’s a preview depicting Quick Action created over the Account Object to test the Multiple File Uploads Functionality
On clicking the ‘Upload Files’ button, a prompt like the one below opens up.
At this point, you can either select files individually or make use of the drag-and-drop functionality. A progress bar fills up next to each file, along with a green checkbox to indicate completion as shown here.
As soon as the files are inserted, they get attached as Child Records to the relevant Parent Record in the database.
once uploaded successfully, the files are displayed within the component as file cards, as illustrated below. Clicking the ‘SAVE’ button only redirects you to the Parent Record Detail page, while clicking on the ‘CANCEL FILE UPLOAD’ button will delete the recently uploaded files from the database permanently.
This preview provides a convenient view of the files inserted and lets you undo any unintended or sensitive uploads.
The example here is generic of all sObjects, i.e. the same Controller and Component can be used for all sObjects, even any new Custom sObjects you create.
We’ll now move on to code implementation of the Multiple File Upload Component.
Steps to develop Multiple File Upload Lightning Component for any sObject of choice
Step 1:Create an Apex Controller
Here are the attributes defined:
- name – Specifies the name of the input element
- multiple – Specifies whether a user can upload more than one file simultanesouly. This value defaults to false.
- accept – Comma-separated list of file extensions that can be uploaded in the format .ext, such as .pdf, .jpg, or .png
- disabled – Specifies whether this component should be displayed in a disabled state. Disabled components can’t be clicked. This value defaults to false.
- recordId – The record Id of the record that the uploaded file is associated to.
onuploadfinished – The action triggered when files have finished uploading
Step 2: Create Lightning Component Bundle:
Component : MultipleFileUploads.cmp
Explanation of component code: –
- lightning:fileUpload: – Lightning base tag used to upload the files related to an sobject which requires attribute recordId (parent Id for files).
- onuploadfinished: – Javascript controller method which will execute when file upload will be finished to handle the processing after files are uploaded.
- force:lightningQuickAction: – If we implement this interface then the component will be available for quick Action
force:hasRecordId : – To fetch the recordId of the current Record.
JavaScript Controller : MultipleFileUploadsController.js
Helper : MultipleFileUploadsHelper.js
Style : MultipleFileUploads.css
Test the functionality: –
Because of its known limitations we cannot test this using standalone app so we will test this using lightning quick action and for testing purpose, we will use Account Object.
We have created another lightning component as a container where we will invoke MultipleFileUploads lightning component.
Lightning Component: LightningFileUploadExample.cmp
Conclusion
The implementation here uses Lightning Components to insert variable file sizes into any Parent Record.
We hope this helps you and your sales staff navigate through file uploads quicker. For further assistance in setting up and Configuring Lightning Components or Customizations to them, please reach out to us at sales@hicstwebackup.yoursalesforcedeveloper.com.
India 
USA
UK
Canada