Lesson: 37 | File Upload and Display

Notes

Notes

<template>
 <lightning-card>
     <!-- File Upload Component -->
     <lightning-file-upload 
     label="Upload Files"
     name="fileUploader"
     accept=".pdf,.png,.jpg"
     record-id={recordId}
     onuploadfinished={handleUploadFinished}>
 </lightning-file-upload>

 <!-- Display uploaded files -->
 <template if:true={uploadedFiles}>
     <ul>
         <template for:each={uploadedFiles} for:item="file">
             <li key={file.documentId}>
                 {file.name} (ID: {file.documentId})
             </li>
         </template>
     </ul>
 </template>
</lightning-card>
</template>

JavaScript

import { LightningElement, api } from 'lwc';

export default class FileUploadComponent extends LightningElement {
    @api recordId;
    uploadedFiles;


    handleUploadFinished(event) {
        const uploadedFiles = event.detail.files;
        console.log('Uploaded Files', uploadedFiles); 

        this.uploadedFiles = uploadedFiles.map(file => ({
            name: file.name,
            documentId: file.documentId
        }));
    }
}

You need to login to have access to the quizzes.

Mastered by 0 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 37 | File Upload and Display

Notes

Lightning Web Components