Today In this article we will create custom file uploading functionality using LWC
Apex Class
public class customFileUploadctrl {
@AuraEnabled
public static void saveFile(String fileName, String blobData){
ContentVersion cntVersion = new ContentVersion();
cntVersion.PathOnClient = fileName;
cntVersion.Title = fileName;
cntVersion.VersionData = EncodingUtil.base64Decode(blobData);
insert cntVersion;
}
}
customFileUpload.html
<template>
<div class="slds-p-around_medium lgc-bg" style="text-align:center;">
<lightning-input type="file" label="Attachment" onchange={openFileUpload}
accept={acceptedFormats} ></lightning-input>
<div class="slds-text-body_small slds-text-color_error">{filesName}</div>
</div>
<template if:true={loader}>
<div style="min-height:3rem;transform: translate(0, 0);">
<lightning-spinner alternative-text="Loading..." size="small"></lightning-spinner>
</div>
</template>
<div style="text-align:center;">
<lightning-button variant="brand" label="Submit" title="Submit"
onclick={handleUpload}></lightning-button>
</div>
</template>
customFileUpload.js
import { LightningElement, track } from 'lwc';
import saveFile from '@salesforce/apex/customFileUploadctrl.saveFile';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class CustomFileUpload extends LightningElement {
@track filesName;
@track loader = false;
fileData;
get acceptedFormats() {
return ['.pdf', '.jpg', '.jpeg', '.png'];
}
//handle file changes
openFileUpload(event) {
let files = event.target.files;
if (files) {
let file = files[0];
this.filesName = file.name;
let freader = new FileReader();
freader.onload = fr => {
let base64 = 'base64,';
let contentData = freader.result.indexOf(base64) + base64.length;
let subStringFile = freader.result.substring(contentData);
this.fileData = {
'fileName': file.name,
'blobData': subStringFile
};
};
freader.readAsDataURL(file);
}
}
handleUpload() {
const { fileName, blobData } = this.fileData;
this.loader = true;
saveFile({
fileName, blobData
})
.then(() => {
this.fileData = null;
this.loader = false;
this.filesName = '';
this.dispatchEvent(
new ShowToastEvent({
title: "success!",
message: 'File Upload successfully',
variant: "success"
})
);
})
}
}
