FREE SALESFORCE LWC COMPONENT

File Upload

Use Salesforce file permissions and record context deliberately; the UI alone does not determine access.

Component structure

COMPONENTwcsFileUpload

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <lightning-file-upload
    label="Attach files"
    record-id={recordId}
    onuploadfinished={handleUploadFinished}>
  </lightning-file-upload>
</template>

JavaScript

import { LightningElement, api } from 'lwc';

export default class WcsFileUpload extends LightningElement {
  @api recordId;

  handleUploadFinished(event) {
    this.dispatchEvent(new CustomEvent('uploadfinished', {
      detail: event.detail.files
    }));
  }
}

CSS

:host{display:block}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>