File read issue in file upload Lightning Web Component

Question

I'm using "lightning-file-upload" LWC and it is working fine, I'm just not sure how to access the file name and document ID as mentioned in the knowledge article below: https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload/documentation

Below is my LWC code:

HTML File

<template>
<lightning-card title="CSV File Uploader" icon-name="custom:custom20">
<lightning-file-upload
        label=""
        name="fileUploader"
        accept={acceptedFormats}
        record-id={recordId}
        onuploadfinished={handleUploadFinished}
        multiple>
</lightning-file-upload>
</lightning-card>

JS File

import { LightningElement, track,api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import startProcessing from '@salesforce/apex/GIM_CsvUploader.startProcessing';

export default class CsvFileUpload extends LightningElement {
    @api recordId;

    get acceptedFormats() {
        return ['.csv'];
    }

    handleUploadFinished(event) 
    {
        let strFileNames = '';
        // Get the list of uploaded files
        const uploadedFiles = event.detail.files;
        startProcessing({ DocId: this.recordId, Name: 'test'}) 
        alert( event.detail.files[0].Name);
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success!!',
                message: ' Following files uploaded Successfully: ',
                variant: 'success',
            }),
        )
    }}}

According to the documentation the alert should show the file name of the first uploaded file but it says undefined.

Answer 1

You are having issue with case sensitivity of name attribute in alert( event.detail.files[0].Name);

uploadfinished

The event fired when files are uploaded successfully.The uploadfinished event returns the following parameter.

PARAMETER TYPE DESCRIPTION files object The list of files that are uploaded.

event.detail.files returns a list of uploaded files with the attributes name and documentId.

1. name: The file name in the format filename.extension, for example, account.jpg.
2. documentId: The ContentDocument Id in the format 069XXXXXXXXXXXX.

If you pay attention to Your code, you have used Capital N in name attribute whereas expected is small as JavaScript is case sensitive.

alert(uploadedFiles[0].name); // it will work fine