Project: Document Upload Component
By the end of this lesson, you'll be able to:
- Use the lightning-file-upload base component to attach files to a record
- Handle the uploadfinished event to react to a completed upload
- Provide clear feedback while and after an upload completes
Prerequisites: "Project: Client 360 Component"
lightning-file-upload: A New Base Component
<lightning-file-upload
label="Attach Supporting Documents"
name="fileUploader"
record-id={recordId}
accept={acceptedFormats}
multiple
onuploadfinished={handleUploadFinished}>
</lightning-file-upload>lightning-file-upload handles the entire file-selection and upload mechanics — including the actual attachment to record-id — with no manual createRecord call needed for the file itself. accept restricts which file types are allowed; multiple permits selecting more than one file at once.
Handling uploadfinished
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class DocumentUpload extends LightningElement {
@api recordId;
get acceptedFormats() {
return ['.pdf', '.docx', '.png', '.jpg'];
}
handleUploadFinished(event) {
const uploadedFiles = event.detail.files;
this.dispatchEvent(new ShowToastEvent({
title: 'Upload Complete',
message: `${uploadedFiles.length} file(s) attached successfully.`,
variant: 'success',
}));
}
}event.detail.files carries the list of successfully uploaded files — the same ShowToastEvent pattern from Module 8 gives the user clear confirmation without any custom Apex needed for the upload itself.
Exercise
Restrict the accepted formats to only .pdf and .docx files.
Show hint
Update the acceptedFormats getter.
Exercise
Challenge: explain, as a comment, why this component needs no custom Apex or createRecord call to actually attach the file.
Show hint
Think about what lightning-file-upload already does internally.
Project: Document Upload Component Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
lightning-file-upload — a base component not yet covered — handles the entire file-selection and upload mechanics; the component's own job is simply reacting to the uploadfinished event with the same feedback patterns used throughout this course.