function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
vineet kumarvineet kumar 

Upload a file in LWC

Hi All,

Need help in file upload.
implementing through the below way

<lightning-input type="file" label="Attachment" accept="image/png, .zip" onchange={handleFilesChange} >
</lightning-input>

tried but not working.
Thanks.
VinayVinay (Salesforce Developers) 
Try below.
accept= '.png','.jpg','.jpeg'
https://www.salesforcetroop.com/custom_file_upload_using_lwc
https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload/documentation

Thanks,
VICKY_SFDCVICKY_SFDC
COPY AND PASTE BELOW CODE:
MARK IT AS BEST ANSWER IF MY SOLUTION HELPS YOU:

.html:

<template> <lightning-card title="File Upload Demo LWC" icon-name="custom:custom14"> <div class="slds-m-around_medium"> <lightning-input type="file" accept=".xlsx, .xls, .csv, .png, .doc, .docx, .pdf" label="Attachment" onchange={openfileUpload}></lightning-input> </div> <template if:true={fileData}> <p>{fileData.filename}</p> </template> <lightning-button variant="brand" label="submit" title="Submit" onclick={handleClick} class="slds-m-left_x-small"></lightning-button> </lightning-card> </template>


.js:


import { LightningElement, api } from 'lwc'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import uploadFile from '@salesforce/apex/FileUploaderClass.uploadFile' export default class FileUploaderCompLwc extends LightningElement { @api recordId; fileData openfileUpload(event) { const file = event.target.files[0] var reader = new FileReader() reader.onload = () => { var base64 = reader.result.split(',')[1] this.fileData = { 'filename': file.name, 'base64': base64, 'recordId': this.recordId } console.log(this.fileData) } reader.readAsDataURL(file) } handleClick(){ const {base64, filename, recordId} = this.fileData uploadFile({ base64, filename, recordId }).then(result=>{ this.fileData = null let title = `${filename} uploaded successfully!!` this.toast(title) }) } toast(title){ const toastEvent = new ShowToastEvent({ title, variant:"success" }) this.dispatchEvent(toastEvent) } }


.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__RecordPage</target> </targets> </LightningComponentBundle>


Apex Class==>FileUploaderClass.cls


public with sharing class FileUploaderClass { /* * @method uploadFile() * @desc Creates a content version from a given file's base64 and name * * @param {String} base64 - base64 string that represents the file * @param {String} filename - full file name with extension, i.e. 'products.csv' * @param {String} recordId - Id of the record you want to attach this file to * * @return {ContentVersion} - returns the created ContentDocumentLink Id if the * upload was successful, otherwise returns null */ @AuraEnabled public static String uploadFile(String base64, String filename, String recordId) { ContentVersion cv = createContentVersion(base64, filename); ContentDocumentLink cdl = createContentLink(cv.Id, recordId); if (cv == null || cdl == null) { return null; } return cdl.Id; } /* * @method createContentVersion() [private] * @desc Creates a content version from a given file's base64 and name * * @param {String} base64 - base64 string that represents the file * @param {String} filename - full file name with extension, i.e. 'products.csv' * * @return {ContentVersion} - returns the newly created ContentVersion, or null * if there was an error inserting the record */ private static ContentVersion createContentVersion(String base64, String filename) { ContentVersion cv = new ContentVersion(); cv.VersionData = EncodingUtil.base64Decode(base64); cv.Title = filename; cv.PathOnClient = filename; try { insert cv; return cv; } catch(DMLException e) { System.debug(e); return null; } } /* * @method createContentLink() [private] * @desc Creates a content link for a given ContentVersion and record * * @param {String} contentVersionId - Id of the ContentVersion of the file * @param {String} recordId - Id of the record you want to attach this file to * * @return {ContentDocumentLink} - returns the newly created ContentDocumentLink, * or null if there was an error inserting the record */ private static ContentDocumentLink createContentLink(String contentVersionId, String recordId) { if (contentVersionId == null || recordId == null) { return null; } ContentDocumentLink cdl = new ContentDocumentLink(); cdl.ContentDocumentId = [ SELECT ContentDocumentId FROM ContentVersion WHERE Id =: contentVersionId ].ContentDocumentId; cdl.LinkedEntityId = recordId; // ShareType is either 'V', 'C', or 'I' // V = Viewer, C = Collaborator, I = Inferred cdl.ShareType = 'V'; try { insert cdl; return cdl; } catch(DMLException e) { System.debug(e); return null; } } }
Suraj Tripathi 47Suraj Tripathi 47
Hi vineet,

you can upload file in lwc by using lightning-file-upload tag in lwc. lightning-file-upload 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. 

use below link to check complete example 

https://www.sfdcpoint.com/salesforce/file-upload-in-lightning-web-component/


If you find your Solution then mark this as the best answer. 

Thank you!

Regards 
Suraj Tripathi