File Upload in Lightning Web Component | Salesforce Lightning Tutorial
Users can upload many files quickly and easily with the lightning-file-upload component. Drag and drop capabilities and file type filters are also available in the file uploader.
The record-id attribute is necessary since file uploads are always linked to a particular record. On the record detail page's Attachments related list and in Files Home's Owned by Me filter, uploaded files can be found. Although Salesforce supports all file formats, you can limit the file formats by using the accept attribute.
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>
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', }), ); } }
Don't forget to check out: Salesforce Lightning Web Component Crash Course | Learn LWC in 100 Minutes with Live Project
fileUploadLWC.js-meta.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>
This lwc component can now be added to the account detail page.
- Click on one of the account detail records.
- Select Edit Page by clicking Setup (the gear icon).
- Locate your fileUploadLWC component under Custom Components and drag it to the Account page.
- After activating, click Save.
Output
When Once the user will click on the Done button, the user will see a success message.
Check out another amazing blog by Narendra Kumar here: All You Need to Know About the Wrapper Class In Salesforce
File Upload Limits
Unless your Salesforce admin has modified the default upload limit, you can upload up to 10 files at once. A maximum of 25 files and a minimum of 1 file may be submitted concurrently per organization. In the file upload, You can upload files up to 2 GB in size. The parameters established by community file moderation govern the maximum file sizes and permitted file formats in Communities. Users who are guests cannot upload files by default. The org preference can be enabled. Permit visitors to the site to upload files.
Usage Considerations
This component appears as a disabled input and is not supported by Lightning Out or independent apps. Additionally, if your company has activated the security setting Don't allow HTML uploads as attachments or document records, you cannot use the file uploader to upload files with the following file extensions:.htm,.html,.htt,.htx,.mhtm,.mhtml,.shtm,.shtml,.acgi,.svg.
Responses