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@hicglobalsolutions.com.

Related Articles
Please Make Blog Banner How to Create an Agentforce Enabled Scratch Org in Salesforce 100 1

Setting up an Agentforce-enabled scratch org is the most important step for developers who want to experiment with AI features such as Prompt Builder and Einstein GPT. Whether you’re developing the next generation CRM software or experimenting with how generative AI may improve user experience, a scratch org equipped with Agentforce is your playground. Follow […]

Read More
Step-by-Step Guide to Enhance Your LWC Development Workflow with the Logger API

Are you looking to streamline your LWC development workflow but confused about how to do it? Then you are in the right place. The Salesforce Logger API is a powerful tool that helps you monitor, debug, and improve code quality in real time.  This step-by-step guide walks you through how to set it up and […]

Read More
Enhancing Your Salesforce Experience with a Custom Activity Component

In today’s fast-paced business landscape, productivity hinges on streamlined workflows and intuitive interfaces. While Salesforce offers robust activity tracking capabilities, sometimes the standard components fall short of specific organizational needs.  That’s where a Custom Activity Component comes in—designed to tailor your activity management experience, boost user efficiency, and provide deeper insights into customer interactions. In […]

Read More
Step-by-Step Guide to Integrating Salesforce Doc-Gen with eSigning Tools

In today’s fast-paced digital landscape, streamlining document workflows is no longer a luxury—it’s a necessity.  Integrating a document generation app, like Docs Made Easy, with an eSigning tool, helps businesses automate the entire document lifecycle—from creation to signature—saving time, reducing errors, and boosting productivity. In this guide, we’ll walk you through the key steps, tools, […]

Read More
How to Build a Real Time Chat Application Using LWC and Models API

The Models API plays a significant role in providing access to and facilitating interaction with large language models (LLMs) from various Salesforce partners such as Anthropic, Google, and OpenAI. It enables applications to leverage these models for various tasks, including text generation and other AI-powered capabilities. As a user, you can configure any Salesforce-enabled model […]

Read More
How to Integrate Salesforce Data Cloud with Amazon Redshift

Companies can finally connect Amazon Redshift to Salesforce Data Cloud without using the ordinary username & password authentication systems ever since its collaboration with AWS has happened. Business owners no longer have to be concerned about managing static credentials or breaching data security. By leveraging Salesforce IDP, companies can easily access their data lakehouse in […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818