lightning:fileUpload

A file uploader for uploading and attaching files to records.

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.

Attributes

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.