# File Uploader Lit component for uploading files with drag and drop capability. This component does not perform the actual uploading work - it simply provides visual cues and exposes an event when files have been uploaded. An official component for this is in progress. Please reach out before adding a new usage of this labs version! ## File Uploader [d2l-labs-file-uploader] ```html ``` ```html ``` ### Basic Usage with Accessible Label It's important to always provide an accessible label which describes the purpose of the uploader using the `label` attribute. The label will be hidden visually but associated with the upload input for those using assistive technologies such as a screen reader. ```html ``` ### Multi-file Uploads To allow for multiple files to be uploaded, add the `multiple` attribute: ```html ``` ### Localization The file uploader will automatically render using the language found on the HTML element -- i.e. ``. If the language attribute is not present or isn't supported, the uploader will render in English. ### Feedback Messages If you encounter a scenario where you'd like to display feedback about the uploaded file(s) -- like a warning or an error -- use the `feedback` and `feedback-type` attributes. The `feedback-type` defaults to "warning"(using `--d2l-color-feedback-warning`), but can also be set to "error"(using `--d2l-color-feedback-error`): ```html ``` ```html ``` #### Feedback Changed Event To listen for when feedback changes within the uploader, register for the `feedback-changed` event. Vanilla JavaScript: ```html ``` ### Handling Uploaded Files When the user uploads one or more files, a `d2l-file-uploader-files-added` event is fired. To listen for this event, wire up an event listener to the `` element. The listener will be passed an event with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects from the [File API](https://developer.mozilla.org/en/docs/Web/API/File). Vanilla JavaScript: ```html ```