A `lightning-file-upload` component provides an easy and integrated way for
users to upload multiple files. The file uploader includes drag-and-drop
functionality and filtering by file types.

This component inherits styling from
[file selector](https://www.lightningdesignsystem.com/components/file-selector) in
the Lightning Design System.

File uploads are always associated to a record, so the `record-id` attribute
is required. Uploaded files are available in Files Home under the Owned by Me
filter and on the record's Attachments related list that's on the record detail page.
Although all file formats that are supported by Salesforce are allowed, you
can restrict the file formats using the `accept` attribute.

This example creates a file uploader that allows multiple PDF and PNG files to
be uploaded. Change the `record-id` value to your own.

```html
<template>
    <lightning-file-upload
            label="Attach receipt"
            name="fileUploader"
            accept={acceptedFormats}
            record-id={myRecordId}
            onuploadfinished={handleUploadFinished}
            multiple>
    </lightning-file-upload>
</template>
```

You must handle the `uploadfinished` event, which is fired when the upload
is finished.

```javascript
import { LightningElement, api } from 'lwc';
export default class MyComponentName extends LightningElement {
    @api
    myRecordId;

    get acceptedFormats() {
        return ['.pdf', '.png'];
    }

    handleUploadFinished(event) {
        // Get the list of uploaded files
        const uploadedFiles = event.detail.files;
        alert("No. of files uploaded : " + uploadedFiles.length);
    }
}
```

#### 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 Communities, the file size limits
and types allowed follow the settings determined by community file moderation.
By default, guest users can't upload files. You can enable the org preference
`Allow site guest users to upload files`.

#### Usage Considerations

This component is not supported in Lightning Out or standalone apps, and
displays as a disabled input. Additionally, if the `Don't allow HTML uploads
as attachments or document records` security setting is enabled for your
organization, the file uploader cannot be used to upload files with the
following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm,
.shtml, .acgi, .svg. For more information, see
[Upload and Share Files](https://help.salesforce.com/articleView?id=collab_files_upload_share.htm) in Salesforce Help.

If an error is detected on the client side, the file upload dialog shows an
informative error message. For example, the message informs you if you try
to upload a file type that is not on the `accept` list. If an error
is detected on the server side, you see a generic "Can't upload file"
error. For example, you get this error if you don't provide a valid
record ID or the upload violates a validation rule.

We recommend that you add one or more record types to the ContentVersion
object in your org. When record types are present, the file uploader enables you to
provide details about the file and shows any error messages from the server.
This feature is useful if your org uses Apex triggers or validation rules
for file uploads, or has required custom fields in the ContentVersion object.
You can fix errors or provide required information to complete the upload
without reuploading the file.

#### Custom Events

**`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`.

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

The event properties are as follows.

Property|Value|Description
-----|-----|----------
bubbles|false|This event does not bubble.
cancelable|false|This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event.
composed|false|This event does not propagate outside the template in which it was dispatched.
