Uploading Files in lightning Component without Apex Code

Uploading Files in lightning Component without Apex Code

It allows users to upload multiple files to a record. The file uploader includes drag-and-drop functionality and filtering by file types.
Apex have some limitations:
* Extensive coding.
* Cannot exceed file size limit of 6MB.

Salesforce has come up with a new tag that provides an easy way to upload your files as attachment. You can also drag and drop files that need to be uploaded.

The recordId is a required attribute as it associates the file to the parent record. Maximum you can upload upto 10 files simultaneously. The maximum file size that you can upload is 2GB. We can use this component for record detail page in Any Platform.

Files with following extension cannot be used: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg

Note : Label and recordId are required attributes. If recordId is not specified, the component is visible in disabled state.


FileUploadLightningComponent.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="recordId" type="Id" description="Record to which the files should be attached"/>
<lightning:fileUpload label="Add attachment" multiple="true" accept=".pdf, .png, .docx, .xlsx" recordId="{!v.recordId}" onuploadfinished="{!c.handleUploadFinished}"         />
</aura:component>

FileUploadLightningComponentController.js

({
    handleUploadFinished : function(component, event, helper) {
 
        // Get the list of uploaded files
        var uploadedFiles = event.getParam("files");
        //When single file updated then its looking good otherwise remove below code.
         var toastEvent = $A.get("e.force:showToast");
         toastEvent.setParams({
            "title": "Success!",
            "message": "File "+uploadedFiles[0].name+" Uploaded successfully."
         });
         toastEvent.fire();
 
    }
})


So, a simple lightning tag allows you to upload files quickly and easily without any size limitations and no need of extensive coding.

Happy Sharing...

Everyone has their own favourites, so please feel free to share yours in the comments below!

Comments

Post a Comment

Popular posts from this blog

Salesforce LWC : Compact Layout on Hover

Salesforce LWC With Third Party JS : D3

Communications between Lightning Components : Salesforce