File Upload in Lightning Web Component (LWC) | All You Need to Know
User can upload multiple files in LWC using lightning-file upload. Due to the fact that file uploads are always associated with a specific record, the record-id attribute is required. The attachments related list on the record detail page and the Owned by Me filter in Files Home are where you can find uploaded files. Despite the fact that Salesforce is compatible with all file types, you can restrict the file types by utilising the accept attribute.
The file picker in the Lightning Design System is where the lightning-file-upload component gets its styling.
File Upload Example
FileUploadLWC.html
<template>
<lightning-card title="LWC File Upload Example" icon-name="custom:custom19">
<lightning-file-upload
label="Attach receipt"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</lightning-card>
</template>
Don't forget to check out: Learn the Basics of LWC in No Time! | Salesforce Lightning Web Components
FileUploadLWC.js
import { LightningElement, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class FileUploadLWC extends LightningElement {
@api recordId;
get acceptedFormats() {
return ['.pdf', '.png','.jpg','.jpeg'];
}
handleUploadFinished(event) {
// Get the list of uploaded files
const uploadedFiles = event.detail.files;
let uploadedFileNames = '';
for(let i = 0; i < uploadedFiles.length; i++) {
uploadedFileNames += uploadedFiles[i].name + ', ';
}
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: uploadedFiles.length + ' Files uploaded Successfully: ' + uploadedFileNames,
variant: 'success',
}),
);
}
}
FileUploadLWC.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>48.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
Check out another amazing blog by Ashutosh here: What is an Enhanced Domain in Salesforce in 2023?
How to get Clicked Record from a List of Records?
- If you want to add files on a list of records (for example, Query opportunities and have file upload option in front of each record), so you can use lightning-input type = file and assign each record an id using data-id in html.
- Data-id will be used in js file to assign a record-id from where the file upload option is clicked using event.target.id
File Upload Limit
You can upload up to 10 files at once unless your Salesforce admin changed the default upload limit. Per organisation, a minimum of 1 file and a maximum of 25 files may be uploaded simultaneously. Up to 2 GB of data can be uploaded. The maximum file sizes and accepted file formats in Communities are governed by the guidelines issued by community file moderation. By default, guests are unable to upload files. One can enable the org preference. Allow website visitors to upload files.
Responses