lightning:fileUpload Example

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. 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 that are supported by Salesforce are allowed, you can restrict the file formats using the¬†accept¬†attribute. Here is the example code .

Lightnin Component 

<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="accept" type="List" default="['.jpg', '.jpeg']"/>
    <aura:attribute name="multiple" type="Boolean" default="true"/>
    <aura:attribute name="disabled" type="Boolean" default="false"/>
                    
    <lightning:fileUpload label="Add attachment" multiple="{!v.multiple}" 
                          accept="{!v.accept}" recordId="{!v.recordId}" 
                          onuploadfinished="{!c.handleUploadFinished}" />
    
</aura:component>

Controller 

({
    handleUploadFinished : function(component, event, helper) {
        var uploadedFiles = event.getParam("files");
        var documentId = uploadedFiles[0].documentId;
        var fileName = uploadedFiles[0].name;
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "File "+fileName+" Uploaded successfully."
        });
        toastEvent.fire();
        
        $A.get('e.lightning:openFiles').fire({
            recordIds: [documentId]
        });
        
    }
})

 

Code walkthrough 

  1. event.getParam(“files”)¬†returns a list of uploaded files with the properties¬†name¬†and¬†documentId.name: The file name in the format¬†filename.extension.documentId: The ContentDocument Id in the format¬†069XXXXXXXXXXXX.
        var uploadedFiles = event.getParam("files");
        var documentId = uploadedFiles[0].documentId;
        var fileName = uploadedFiles[0].name;

2. Below code will show the Toast on Successfully file upload

var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "File "+fileName+" Uploaded successfully."
        });
        toastEvent.fire();

3.below code will open the file preview after file upload.

 $A.get('e.lightning:openFiles').fire({
            recordIds: [documentId]
        });

File Upload Limits

By default, you can upload up to 10 files simultaneously unless your Salesforce admin has changed that limit. The org limit for the number of files simultaneously uploaded is a maximum of 25 files and a minimum of 3 files. 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. Guest user can’t add files.

Usage Considerations

This component is not supported in Lightning Out or standalone apps, and displays as a disabled input. Additionally, if the Don't allow HTML uploads as attachments or document records security setting is enabled for your organization, the file uploader cannot be used to upload files with the following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg.