Lightning File Uploader Component:
I am writing this blog post just because, I faced a problem while working with the standard file uploader component, the problem is when you upload the file using standard component there is no way to enter the file Name or Title, it automatically get the file name and updates the Title with that file name, but sometimes users want to enter the specific Name or Title in that case we can not do that with standard component.
The first thing comes to my mind to solve this problem is if anyhow I get the details of the file before upload then I can change the file Title with the user entered name but no luck, there is no action defined for before upload in lightning:fileUpload documentation.
But, lightning:fileUpload component provides ‘onuploadfinished‘ (The action triggered when files have finished uploading.) action, we can call the action (Method) after the file uploading finished and can get the details of files that just uploaded, after that, we can change the Title of File based on the user entered Title.
Below are the Lightning component codes that I have developed to solve the problem that I was facing.
FileUploaderCmp:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component controller="SimplyfyFilesCntrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > | |
| <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> | |
| <aura:attribute name="files" type="ContentDocument[]"/> | |
| <aura:attribute name="recordId" type="string"/> | |
| <aura:attribute name="accept" type="List" default="['.jpg', '.jpeg','.pdf','.csv','.xlsx']"/> | |
| <aura:attribute name="multiple" type="Boolean" default="true"/> | |
| <aura:attribute name="disabled" type="Boolean" default="false"/> | |
| <div class="slds"> | |
| <div style="border-left: 1px solid rgb(221, 219, 218); | |
| border-right: 1px solid rgb(221, 219, 218); | |
| border-bottom: 1px solid rgb(221, 219, 218); | |
| border-top: 1px solid rgb(221, 219, 218);"> | |
| <div class="slds-page-header" style="border-radius: 0px; border-right: 0px;border-left: 0px;border-top: 0px; | |
| box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);"> | |
| Files | |
| </div> | |
| <div class="slds-grid"> | |
| <div class="slds-col slds-size--5-of-12"> | |
| <lightning:input type="text" name="input1" label="Enter File Name" aura:id="fileName" /> | |
| </div> | |
| <div class="slds-col slds-size---of-12"> | |
| <lightning:fileUpload label="" multiple="{!v.multiple}" | |
| accept="{!v.accept}" recordId="{!v.recordId}" | |
| onuploadfinished="{!c.UploadFinished}" /> | |
| </div> | |
| </div><br/> | |
| <table class="slds-table slds-table--bordered"> | |
| <thead> | |
| <tr> | |
| <th>Title</th> | |
| <th>FileType</th> | |
| <th>Description</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <aura:iteration items="{!v.files}" var="f"> | |
| <tr> | |
| <td> <a href="" id="{!f.Id}" onclick="{!c.OpenFile}">{!f.Title}</a></td> | |
| <td>{!f.FileType}</td> | |
| <td>{!f.Description}</td> | |
| </tr> | |
| </aura:iteration> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </aura:component> |
FileUploaderCmpController:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| doInit:function(component,event,helper){ | |
| var action = component.get("c.getFiles"); | |
| action.setParams({ | |
| "recordId":component.get("v.recordId") | |
| }); | |
| action.setCallback(this,function(response){ | |
| var state = response.getState(); | |
| if(state=='SUCCESS'){ | |
| var result = response.getReturnValue(); | |
| console.log('result: ' +result); | |
| component.set("v.files",result); | |
| } | |
| }); | |
| $A.enqueueAction(action); | |
| } , | |
| //Open File onclick event | |
| OpenFile :function(component,event,helper){ | |
| var rec_id = event.currentTarget.id; | |
| $A.get('e.lightning:openFiles').fire({ //Lightning Openfiles event | |
| recordIds: [rec_id] //file id | |
| }); | |
| }, | |
| UploadFinished : function(component, event, helper) { | |
| var uploadedFiles = event.getParam("files"); | |
| var documentId = uploadedFiles[0].documentId; | |
| var fileName = uploadedFiles[0].name; | |
| helper.UpdateDocument(component,event,documentId); | |
| var toastEvent = $A.get("e.force:showToast"); | |
| toastEvent.setParams({ | |
| "title": "Success!", | |
| "message": "File "+fileName+" Uploaded successfully." | |
| }); | |
| toastEvent.fire(); | |
| /* Open File after upload | |
| $A.get('e.lightning:openFiles').fire({ | |
| recordIds: [documentId] | |
| });*/ | |
| }, | |
| }) |
FileUploaderCmpHelper:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| UpdateDocument : function(component,event,Id) { | |
| var action = component.get("c.UpdateFiles"); | |
| var fName = component.find("fileName").get("v.value"); | |
| //alert('File Name'+fName); | |
| action.setParams({"documentId":Id, | |
| "title": fName, | |
| "recordId": component.get("v.recordId") | |
| }); | |
| action.setCallback(this,function(response){ | |
| var state = response.getState(); | |
| if(state=='SUCCESS'){ | |
| var result = response.getReturnValue(); | |
| console.log('Result Returned: ' +result); | |
| component.find("fileName").set("v.value", " "); | |
| component.set("v.files",result); | |
| } | |
| }); | |
| $A.enqueueAction(action); | |
| }, | |
| }) |
SimplyfyFilesCntrl:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class SimplyfyFilesCntrl { | |
| @AuraEnabled | |
| public static List<ContentDocument> getFiles(string recordId){ | |
| List<ContentDocument> DocumentList = new List<ContentDocument>(); | |
| Set<Id> documentIds = new Set<Id>(); //store file ids | |
| List<ContentDocumentLink> cdl=[select id,LinkedEntityId,ContentDocumentId from ContentDocumentLink where LinkedEntityId=:recordId]; | |
| for(ContentDocumentLink cdLink:cdl){ | |
| documentIds.add(cdLink.ContentDocumentId); // Document ids | |
| } | |
| DocumentList = [select Id,Title,FileType,ContentSize,Description from ContentDocument where id IN: documentIds]; | |
| return DocumentList; | |
| } | |
| @AuraEnabled | |
| public static List<ContentDocument> UpdateFiles(string documentId,string title,string recordId){ | |
| system.debug('title: ' +title); | |
| ContentDocument cd = [select id,title from ContentDocument where Id=:documentId]; // Getting files from Parent record | |
| cd.Title = title; // Changing file Title with user entered title | |
| try{ | |
| update cd; // Update ContentDocument (File) | |
| } | |
| catch(DMLException e){ | |
| system.debug('Exception has occurred! ' +e.getMessage()); | |
| } | |
| List<ContentDocument> DocumentList = new List<ContentDocument>(); | |
| Set<Id> documentIds = new Set<Id>(); | |
| List<ContentDocumentLink> cdl=[select id,LinkedEntityId,ContentDocumentId from ContentDocumentLink where LinkedEntityId=:recordId]; | |
| for(ContentDocumentLink cdLink:cdl){ | |
| documentIds.add(cdLink.ContentDocumentId); | |
| } | |
| DocumentList = [select Id,Title,FileType,ContentSize,Description from ContentDocument where id IN: documentIds]; | |
| return DocumentList; // Return list of files on parent record | |
| } | |
| } |
👉 Steps to create quick Action:
- Go to object manager and click on the Object for that you want to create ‘New Action’.
- Click on ‘Buttons Links and Action’ and then click on ‘New Action’ button.
- Select the ‘Action Type’ Lightning Component.
- Select Lightning Component that you just created.
- Enter Label and Name and click on the Save button.
- Go to object page layout and add this action there
Enter the file name and upload the file.
👉 Uploaded files. If you click on uploaded files it will open in the SVG file preview player in lightning experience.
Hope this post helps many. 🙂
Thanks
Arun Kumar.
SFDC Lessons 
I think you missed uploading the helper. Since both files appear to be same. If you can upload that it would be really helpful.
LikeLike
Oh! Yes, I just updated the “FileUploaderCmpHelper” code.
Thanks, Deved.
LikeLike
Hi Arun ,I like yr post .Do you have any example to upload file to outside of Salesforce without saving ContentDocument object? We have REST service to call from Apex controller after browse files from local drive.
And also I need mark files as private/public checkbox in the table selection.
I really appreciate iif you code send some code for helper to call.
LikeLike
Hi Arun, The update query is not working for normal users. It is running only for Administrator. Any solution for this issue
LikeLike
Hi Arun, Your multiple file uploading component helped a lot for my requirement.. Do you have test class for this
LikeLike