How to Build a Lightning File Uploader Component

May 23, 2017 Jaswinder Rattanpal

Many developers have asked how to upload files via Lightning components. In this article, we’ll show you how to build a file uploader in Lightning components using Visualforce, which affords the additional benefit of increased file size limits.

This article assumes that you’re already familiar with Lightning components. If not, before proceeding check out the great introductory module on Trailhead to ensure you’re familiar with how Lightning components work. You can even earn a badge while you’re there!

Salesforce plans to introduce a base file upload component in the future. In the meantime we have two options for creating a file uploader for the Lightning Experience UI:

  • Standard HTML <input type=“file”> tag with an Apex controller. This handles files up to 1 MB.
  • Visualforce, which has a larger file upload limit of 10 MB.

In this post, we cover the second approach, using Visualforce to upload files and attach them to a Salesforce record.


The Lightning component we will develop:

  • Can be included in the page layout of a standard or custom Salesforce record detail page
  • Enables the user to select and upload a file up to 10 MB in size
  • Attaches the uploaded file to the related record

Video demo

To see a demo of the completed file uploader component in action, check out this video:

Implementation details

Now that we’ve established the requirements, let’s dive into the code. All the source code is available in GitHub.

  • UploadFile_Controller.cls
    • This class creates an Attachment record, and associates it with a parent record. Note the associated record is defined as a transient variable so as not to overload the Visualforce view state, which is limited to 135 KB.
    • The controller generates a result message, indicating success or failure of the file upload, and passes that message to the Lightning component for display to the user.
    • This page exchanges messages with the Lightning component.
    • Once the page loads successfully, Visualforce sends a message to the Lightning component. Otherwise, the Lightning component has no way to know that the iFrame was loaded. And if we try to send data before the receiving iFrame is ready, we get an error.
    • Once a file is selected in the form, Visualforce sends another message to the Lightning component, which then enables the submit button.
    • After the file is uploaded, Visualforce sends a message to the Lightning component, indicating success or failure.
  • UploadFileContainer.cmp
    • This component can be inserted in the page layout of any Salesforce object.
    • The current record ID is sent to Visualforce to use as the parent record ID for the resulting Attachment record.
    • Once a file is uploaded, a UI message is displayed.


In this article, you learned how to create a file upload Lightning component using Visualforce. If you have any questions, reach out to me on Twitter @jrattanpal, or post to the Salesforce Stack Exchange.

Related links

Previous Article
Top 3 Reasons Heroku Developers Should Attend TrailheaDX
Top 3 Reasons Heroku Developers Should Attend TrailheaDX

Are you developing with Heroku, or wondering where to start? Either way, you’re invited to join us at Trail...

Next Article
Level up Your Cred at TrailheaDX With Free Certification Vouchers
Level up Your Cred at TrailheaDX With Free Certification Vouchers

Keep your learning momentum going after TrailheaDX with two free Salesforce certification vouchers. Registe...