function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Alexander HadjiiordanovAlexander Hadjiiordanov 

How to upload a file

Hi all,
I have created simple component to upload files with following code:
<aura:component implements="force:appHostable" controller="BeetleEyeCampaignsController">


    <aura:attribute name="accept" type="List" default="['.jpg', '.jpeg', '.zip']"/>
    <aura:attribute name="multiple" type="Boolean" default="true"/>
    <aura:attribute name="disabled" type="Boolean" default="false"/>

    <lightning:fileUpload  name="fileUploader"
                           label= "Demo Upload"
                           multiple="{!v.multiple}"
                           accept="{!v.accept}"
                           disabled="{!v.disabled}"
                           recordId="abcd"
                           onuploadfinished="{! c.handleUploadFinished }"/>

</aura:component>

Both my js and apex are empty at the moment. When i try to upload small image i get following error:
User-added image

Can anyone help me?
Best Answer chosen by Alexander Hadjiiordanov
Khan AnasKhan Anas (Salesforce Developers) 
Hi Alexander,

You need to implement the force:hasRecordId in your component. Add the force:hasRecordId interface to a Lightning component to enable the component to be assigned the ID of the current record. The current record ID is useful if the component is used on a Lightning record page, as an object-specific custom action or action override in Lightning Experience or the Salesforce app, and so on.
 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >

If your component implements force:hasRecordId, you don’t need to add a recordId attribute to the component yourself. If you do add it, don’t change the access level or type of the attribute or the component will cause a runtime error.

More information: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation

Also, this component is not supported in Lightning Out or standalone apps, and displays as a disabled input. Additionally, It doesn'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. 

And, please check the API version also. It should be the latest.

I hope it helps you.

Kindly mark this as solved if the information was helpful.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Alexander,

Greetings to you!

You need to get the record Id in the lightning component, which is what the force:hasRecordId interface is for. It is automatically initialized from the context if you declare the interface force:hasRecordId.

Replace recordId="abcd" with recordId="{!v.recordId}"

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

And below is the controller code (if you need). Kindly modify the code as per your requirement.
 
({
    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]
        });
    }
})

Please refer to below link for more information:
https://developer.salesforce.com/docs/component-library/bundle/lightning:fileUpload/documentation

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas
Alexander HadjiiordanovAlexander Hadjiiordanov
Hi Khan,
Thank you for your reply but it didn't work. When i change "abcd" with "{!v.recordId}" the upload becomes disabled:

"abcd":
User-added image

"{!v.recordId}":
User-added image

I copied your code exactly and it is the same. Also tried to to add recordId as aura:attribute like in the link to the doc you posted - it is still the same.
Khan AnasKhan Anas (Salesforce Developers) 
Hi Alexander,

You need to implement the force:hasRecordId in your component. Add the force:hasRecordId interface to a Lightning component to enable the component to be assigned the ID of the current record. The current record ID is useful if the component is used on a Lightning record page, as an object-specific custom action or action override in Lightning Experience or the Salesforce app, and so on.
 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >

If your component implements force:hasRecordId, you don’t need to add a recordId attribute to the component yourself. If you do add it, don’t change the access level or type of the attribute or the component will cause a runtime error.

More information: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation

Also, this component is not supported in Lightning Out or standalone apps, and displays as a disabled input. Additionally, It doesn'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. 

And, please check the API version also. It should be the latest.

I hope it helps you.

Kindly mark this as solved if the information was helpful.

Thanks and Regards,
Khan Anas
This was selected as the best answer