In this post, we will implement the functionality to upload files using LWC (Lightning Web Components) using lightning-file-upload. Let’s hop into the implementation.
Implementation
In this implementation, we will display Case Record with the Upload Files button. Once the files are uploaded, we will display the files in the same component.
Create component fileUpload. Use lightning-record-view-form of Lightning Data Service to display the Case details. Using lightning-record-view-form, we can display fields of Object without calling Apex method. Check this post if you want to know how lightning-record-view-form works as this post won’t explain it.
Add lightning-file-upload base component with below attributes.
- label: Label for the Upload Files button.
- name: Name of the component.
- accept: To restrict the File Types. Only Files Types provided in the list are supported for uploading.
- record-id: To associate uploaded files to a particular record.
- onuploadfinished: This method will be called once the file is uploaded successfully.
Iterate through the lstAllFiles array that will contain the list of all the files that are uploaded.
fileUpload.html
<template>
<lightning-card title="File Upload in LWC">
<div class="slds-p-horizontal_x-small" >
<lightning-layout>
<lightning-layout-item size="6">
<div class="slds-p-left_medium">
<lightning-record-view-form object-api-name="Case" record-id={strCaseId}>
<lightning-output-field field-name="CaseNumber"></lightning-output-field>
<lightning-output-field field-name="Subject"></lightning-output-field>
<lightning-output-field field-name="AccountId"></lightning-output-field>
<lightning-output-field field-name="Description"></lightning-output-field>
</lightning-record-view-form>
<lightning-file-upload
label="Attach Files"
name="uploadFile"
accept={acceptedFormats}
record-id={strCaseId}
onuploadfinished={handleUploadFinished} multiple>
</lightning-file-upload>
</div>
</lightning-layout-item>
<lightning-layout-item size="6">
<div class="slds-p-left_medium">
Uploaded Files: <br/>
<template for:each={lstAllFiles} for:item="fileIterator">
<div key={fileIterator} style="margin-top:10px;">
<lightning-icon icon-name="doctype:image" size="small" title="Image"></lightning-icon>
{fileIterator}
</div>
</template>
</div>
</lightning-layout-item>
</lightning-layout>
</div>
</lightning-card>
</template>
In JS Controller, strCaseId is the hardcoded Id of the Case that is passed to the lightning-file-upload. acceptedFormats Getter returns the list of File Types that will be allowed to upload. Check this post to know how Getters work in Lightning Web Components. handleUploadFinished() method will be called once the files are uploaded successfully. We will get the names of files that are uploaded and add it in the lstAllFiles array. This array is used in the component to display the uploaded files.
fileUpload.js
import { LightningElement, track } from 'lwc';
export default class FileUpload extends LightningElement {
strCaseId = '500B0000005N2b2IAC';
@track lstAllFiles = [];
get acceptedFormats() {
return ['.pdf','.png','.jpg'];
}
handleUploadFinished(event) {
// Get the list of uploaded files
const lstUploadedFiles = event.detail.files;
lstUploadedFiles.forEach(fileIterator => this.lstAllFiles.push(fileIterator.name));
}
}
Upload Files using LWC (Lightning Web Components)
Click on Upload Files or Drag and Drop files in the Drop Files section.
The files are also uploaded in the Case record.
To know more about lightning-file-upload, check Salesforce’s official documentation here.
This is how we can Upload Files using LWC (Lightning Web Components). If you want to check more implementations using Lightning Web Components, click here.
If you don’t want to miss new posts, please Subscribe here.
Hi,
I want to get Latitude and Longitude for uploaded image in LWC component. I have EXIF javascript file in my static resource. Following is my code, can you please help:
import EXIF from ‘@salesforce/resourceUrl/exif’;
EXIF.getData(this.filesUploaded, function() {
console.log(“In EXIF getdata —— “);
var obj = {};
console.log(“In obj —— “+obj);
obj.Latitude = EXIF.getTag(this,”GPSLatitude”);
console.log(“In EXIF obj.Latitude —— “+obj.Latitude);
component.set(“Latitude”,String(obj.Latitude));
obj.Longitude = EXIF.getTag(this, “GPSLongitude”);
component.set(“Longitude”,String(obj.Longitude));
obj.CreatedDate = EXIF.getTag(this,”DateTime”);
component.set(“CreatedDate”,String(obj.DateTime));
console.log(“Latitude : “+Latitude);
console.log(“Longitude : “+Longitude);
console.log(“CreatedDate : “+CreatedDate);
});