How to get the uploaded file's size when using lightning-file-upload?

Question

I've tried the following but it returns 'undefined.

event.detail.files[0].size

Answer 1

There is no way from lightning-file-upload itself. This is all from the lightning-file-upload docs.

One reason it doesn't provide the size is that it handles the file size limit automatically (and displays it automatically on upload as well)

File Upload Limits

By default, you can upload up to 10 files simultaneously unless your Salesforce admin has changed that limit. The org limit for the number of files simultaneously uploaded is a maximum of 25 files and a minimum of 1 file. The maximum file size you can upload is 2 GB. In Experience Builder sites, the file size limits and types allowed follow the settings determined by site file moderation.

It terms of what you tried (ex. event.detail.files[0]), it describes the attributes returned in the only event (uploadFinished):

event.detail.files returns a list of uploaded files with the attributes name and documentId. If a guest user performed the file upload, the documentId is not returned.

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

As you can see, there's no size attribute for you to get the file size through this component. You'd have to get the size outside of this standard component (apex method using documentId). You can take the documentId and get the ContentSize from ContentDocument.