File Upload in Lightning Web Component(LWC)

 File Upload in Lightning Web Component(lwc)

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.

To associate an uploaded file to a record, specify the recordId attribute. 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. If you don't specify the recordId attribute, the file is private to the uploading user.

Although all file formats that are supported by Salesforce are allowed, you can restrict the file formats using the accept attribute.

Example:-

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="filetype" type="List" default="['.png', '.jpg', '.jpeg']" />
    <aura:attribute name="multiple" type="Boolean" default="true" />
    <aura:attribute name="disabled" type="Boolean" default="true" />
    <aura:attribute name="recordId" type="String" />
    <lightning:fileUpload label="Attach receipt"
        name="fileUploader"
        multiple="true"
        accept="{!v.filetype}"
        recordId="{!v.recordId}"
        onuploadfinished="{!c.handleUploadFinished}" />
</aura:component>

we need define 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);

        // Get the file name
        uploadedFiles.forEach(file => console.log(file.name));
    }
})

event.getParam("files") returns a list of uploaded files with the properties name and documentId.

• name: The file name in the format filename.extension, for example, account.jpg.
• documentId: The ContentDocument Id in the format 069XXXXXXXXXXXX.
• ContentVersionId: The ContentVersion Id in the format 068XXXXXXXXXXXX.

When a guest user uploads files, the returned list includes only the name and ContentVersionId. The documentId is not returned.

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 1 file. The maximum file size you can upload is 2 GB. In Experience Builder sites, the file size limits and types allowed follow the settings determined by site file moderation.

Enable Guest Users to Upload Files

By default, guest users can’t upload files and don’t have access to objects and their associated records.

To enable guest users to upload files, enable the org preference Allow site guest users to upload files. However, even if you enable this setting, guest users can’t upload files to a record unless guest user sharing rules are in place