2

I have an LWC component which takes xlsx/xlsm file as input and sends the file data to an API as input. Initially, I used lightning-input with type=file which is working as expected for files <3MB and I was unable to work with files >3MB. So I decided to use lightning-file-upload here.

HTML file
<lightning-file-upload
     accept=".xlsx, .xlsm"
     multiple={setmultiplefiles}
     label="Insert File"
     onuploadfinished={openfileUpload}>
</lightning-file-upload>

JS File
openfileUpload(event) {
        console.log(event.target.files);
        console.log(event.target.files[0]);
        const file = event.target.files[0];
        var reader = new FileReader()
        reader.onload = () => {
            var base64 = reader.result.split(',')[1]
            this.fileData = {
                'filename': file.name,
                'base64': base64,
                'recordId': this.recordId
            }
        }
        reader.readAsDataURL(file);
    }

For lightning-file-upload: I see [object Object] in first console log and fails with error "cannot read properties of undefined (reading '0')". After removing the second log statement, I'm getting this error "[Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob']" exactly in the last line(reader.readAsDataURl(file);) and

For lightning-input: (Working fine) I see [object FileList] in console log.

I have referred many related solutions and nothing seems to work. Please provide any solution or suggest any other alternatives to accomplish this task.

Improve this question

1 Answer 1

Reset to default
1

By the time uploadfinished event fires, the files have already been uploaded to the server. This component takes care of reading the file and uploading those files to Salesforce. The event will contain an Array of the name and documentId of the successfully uploaded files in the detail property. You cannot use FileReader on files from lightning-file-upload, because the results are not File or Blob objects.

Improve this answer
1
  • Which means the solution is to pass the received information to Apex which can retrieve the files and their contents (in case anyone else comes across this). Thanks mr fox, you answer augmented the official docs nicely.
    – Wes Nolte
    Commented Aug 14 at 16:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .