mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(file-uploader-drop-container): rework FileUploaderDropContainer (#1125)

Browse source 
- convert `FileList` to `File[]` to be consistent with `FileUploader` and `FileUploaderButton`
- add `files` prop for two-way binding
- dispatch instead of forward the `change` event (detail signature: `File[]`)
This commit is contained in:
metonym 2022-02-21 13:33:11 -08:00 • committed by GitHub
commit 8d3ac75170
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 60 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

43
COMPONENT_INDEX.md
View file

@ -1329,18 +1329,19 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| accept | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types |
| multiple | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| validateFiles | <code>let</code> | No | <code>(files: FileList) => FileList</code> | <code>(files) => files</code> | Override the default behavior of validating uploaded files<br />The default behavior does not validate files |
| labelText | <code>let</code> | No | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| role | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `role` attribute of the drop container |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify `tabindex` attribute |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| files | <code>let</code> | Yes | <code>File[]</code> | <code>[]</code> | Obtain a reference to the uploaded files |
| accept | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types |
| multiple | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| validateFiles | <code>let</code> | No | <code>(files: File) => File</code> | <code>(files) => files</code> | Override the default behavior of validating uploaded files<br />The default behavior does not validate files |
| labelText | <code>let</code> | No | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| role | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `role` attribute of the drop container |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify `tabindex` attribute |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
### Slots
@ -1350,15 +1351,15 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------- |
| add | dispatched | <code>FileList</code> |
| dragover | forwarded | -- |
| dragleave | forwarded | -- |
| drop | forwarded | -- |
| keydown | forwarded | -- |
| change | forwarded | -- |
| click | forwarded | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :------------------ |
| add | dispatched | <code>File[]</code> |
| change | dispatched | <code>File[]</code> |
| dragover | forwarded | -- |
| dragleave | forwarded | -- |
| drop | forwarded | -- |
| keydown | forwarded | -- |
| click | forwarded | -- |
## `FileUploaderItem`