A lightning:fileUpload component provides an easy and integrated way for users to upload multiple files. The file uploader includes drag-and-drop functionality and filtering by file types.
This component inherits styling from file selector in the Lightning Design System.
File uploads are always associated to a record, hence the recordId attribute is required. Uploaded files are available in Files Home under the Owned by Me filter and on the record's Attachments related list on the record detail page. Although all file formats supported by Salesforce are allowed, you can restrict the file formats using the accept attribute.
This example creates a file uploader that allows multiple PDF and PNG files to be uploaded. Change the recordId value to your own.
<aura:component> <aura:attribute name="myRecordId" type="String" description="Record to which the files should be attached" /> <lightning:fileUpload label="Attach receipt" name="fileUploader" multiple="true" accept=".pdf, .png" recordId="{!v.myRecordId}" onuploadfinished="{!c.handleUploadFinished}" /> </aura:component>
You must handle the onuploadfinished event, which is fired when the upload is finished.
({ handleUploadFinished: function (cmp, event) { // Get the list of uploaded files var uploadedFiles = event.getParam("files"); alert("Files uploaded : " + uploadedFiles.length); } })
event.getParam("files") returns a list of uploaded files with the properties name and documentId.
File Upload Limits
By default, you can upload up to 10 files simultaneously unless Salesforce has changed that limit. The org limit for the number of files simultaneously uploaded is a maximum of 25 files and a minimum of one file. The maximum file size you can upload is 2 GB. In Communities, the file size limits and types allowed follow the settings determined by community file moderation.
Usage Considerations
This component isn’t supported in Lightning Out or standalone apps, and displays as a disabled input. Also, if the Don't allow HTML uploads as attachments or document records security setting is enabled for your organization, the file uploader can’t be used to upload files with the following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg. For more information, see Upload and Share Files in Salesforce Help.
Attribute Name | Attribute type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
label | String | The text label for the file uploader. | Yes |
recordId | String | The record Id of the record that the uploaded file is associated to. | Yes |
multiple | Boolean | Specifies whether a user can upload more than one file simultanesouly. This value defaults to false. | |
name | String | Specifies the name of the input element. | |
disabled | Boolean | Specifies whether this component should be displayed in a disabled state. Disabled components can't be clicked. This value defaults to false. | |
accept | List | Comma-separated list of file extensions that can be uploaded in the format .ext, such as .pdf, .jpg, or .png | |
onuploadfinished | Action | The action triggered when files have finished uploading. |