[SalesForce] File read issue in file upload Lightning Web Component

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.

Best Answer

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
Related Topic