How to Upload Files in Salesforce Using Lightning Web Components (LWC)

By Chinmaya July 14, 2025

4 Min Read

Contents

Introduction Method 1: Using lightning-file-upload Component (Recommended)Implementation Steps Key Attributes:Method 2: Custom File Upload with Apex Best Practices Conclusion

Introduction

File uploads are a common requirement in Salesforce applications. With Lightning Web Components (LWC), you can easily implement file upload functionality that stores files as Salesforce Files (ContentVersion) or as attachments.

This guide will walk you through the implementation steps.

Method 1: Using lightning-file-upload Component (Recommended)

The easiest way to implement file uploads is using the built-in lightning-file-upload component.

Implementation Steps

				
					<!-- fileUpload.html -->
<template>
    <lightning-card title="File Upload">
        <div class="slds-p-around_medium">
            <lightning-file-upload
                label="Upload Files"
                name="fileUploader"
                accept={acceptedFormats}
                record-id={recordId}
                onuploadfinished={handleUploadFinished}
                multiple>
            </lightning-file-upload>
        </div>
    </lightning-card>
</template>

				
					// fileUpload.js
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class FileUpload extends LightningElement {
    @api recordId; // The record ID the files should be attached to
    acceptedFormats = ['.pdf', '.png', '.jpg', '.jpeg', '.doc', '.docx'];

    handleUploadFinished(event) {
        // Get the list of uploaded files
        const uploadedFiles = event.detail.files;
        
        // Show success message
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: `${uploadedFiles.length} file(s) uploaded successfully`,
                variant: 'success'
            })
        );
        
        // You might want to refresh related list views here
    }
}

Key Attributes:

- record-id: The record to attach files to
- accept: Specifies allowed file types
- multiple: Allows multiple file selection
- onuploadfinished: Event handler when upload completes

Method 2: Custom File Upload with Apex

For more control over the upload process, you can implement a custom solution:

				
					// fileUploadController.cls (Apex)
public with sharing class FileUploadController {
    @AuraEnabled
    public static Id saveFile(Id parentId, String fileName, String base64Data) {
        ContentVersion cv = new ContentVersion();
        cv.VersionData = EncodingUtil.base64Decode(base64Data);
        cv.Title = fileName;
        cv.PathOnClient = fileName;
        cv.FirstPublishLocationId = parentId;
        insert cv;
        return cv.Id;
    }
}

				
					<!-- customFileUpload.html -->
<template>
    <lightning-card title="Custom File Upload">
        <div class="slds-p-around_medium">
            <input type="file" onchange={handleFileChange} />
            <lightning-button 
                label="Upload" 
                onclick={handleUpload}
                disabled={!fileData || isLoading}
                class="slds-m-top_small">
            </lightning-button>
        </div>
    </lightning-card>
</template>

				
					// customFileUpload.js
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import saveFile from '@salesforce/apex/FileUploadController.saveFile';

export default class CustomFileUpload extends LightningElement {
    @api recordId;
    fileData;
    isLoading = false;

    handleFileChange(event) {
        const file = event.target.files[0];
        const reader = new FileReader();
        
        reader.onload = () => {
            const base64 = reader.result.split(',')[1];
            this.fileData = {
                'fileName': file.name,
                'base64Data': base64
            };
        };
        reader.readAsDataURL(file);
    }

    handleUpload() {
        this.isLoading = true;
        
        saveFile({
            parentId: this.recordId,
            fileName: this.fileData.fileName,
            base64Data: this.fileData.base64Data
        })
        .then(result => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'File uploaded successfully',
                    variant: 'success'
                })
            );
            // Clear the file input
            this.template.querySelector('input[type="file"]').value = '';
            this.fileData = undefined;
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error uploading file',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        })
        .finally(() => {
            this.isLoading = false;
        });
    }
}

Best Practices

1. File Size Limits: Remember Salesforce has file size limits (typically 50MB)
2. Security: Validate file types on both client and server side
3. User Feedback: Always provide visual feedback during upload
4. Error Handling: Handle network issues and server errors gracefully
5. Mobile Support: Test your upload component on mobile devices

Conclusion

Implementing file uploads in LWC can be as simple as using the standard lightning-file-upload component or as customized as building your own solution with Apex. Choose the approach that best fits your requirements, keeping in mind user experience and platform limitations.

For production implementations, consider adding: