diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 2e7595ed..20f5f4d8 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1328,18 +1328,19 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| accept | let | No | string[] | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | -| validateFiles | let | No | (files: FileList) => FileList | (files) => files | Override the default behavior of validating uploaded files
The default behavior does not validate files | -| labelText | let | No | string | "Add file" | Specify the label text | -| role | let | No | string | "button" | Specify the `role` attribute of the drop container | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| tabindex | let | No | string | "0" | Specify `tabindex` attribute | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| files | let | Yes | File[] | [] | Obtain a reference to the uploaded files | +| accept | let | No | string[] | [] | Specify the accepted file types | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | +| validateFiles | let | No | (files: File) => File | (files) => files | Override the default behavior of validating uploaded files
The default behavior does not validate files | +| labelText | let | No | string | "Add file" | Specify the label text | +| role | let | No | string | "button" | Specify the `role` attribute of the drop container | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| tabindex | let | No | string | "0" | Specify `tabindex` attribute | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the input | ### Slots @@ -1349,15 +1350,15 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------- | -| add | dispatched | FileList | -| dragover | forwarded | -- | -| dragleave | forwarded | -- | -| drop | forwarded | -- | -| keydown | forwarded | -- | -| change | forwarded | -- | -| click | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :------------------ | +| add | dispatched | File[] | +| change | dispatched | File[] | +| dragover | forwarded | -- | +| dragleave | forwarded | -- | +| drop | forwarded | -- | +| keydown | forwarded | -- | +| click | forwarded | -- | ## `FileUploaderItem` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 7e30bf03..78942e19 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -3749,6 +3749,17 @@ "constant": false, "reactive": false }, + { + "name": "files", + "kind": "let", + "description": "Obtain a reference to the uploaded files", + "type": "File[]", + "value": "[]", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": true + }, { "name": "multiple", "kind": "let", @@ -3764,7 +3775,7 @@ "name": "validateFiles", "kind": "let", "description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files", - "type": "(files: FileList) => FileList", + "type": "(files: File) => File", "value": "(files) => files", "isFunction": true, "isFunctionDeclaration": false, @@ -3858,12 +3869,12 @@ } ], "events": [ - { "type": "dispatched", "name": "add", "detail": "FileList" }, + { "type": "dispatched", "name": "add", "detail": "File[]" }, + { "type": "dispatched", "name": "change", "detail": "File[]" }, { "type": "forwarded", "name": "dragover", "element": "div" }, { "type": "forwarded", "name": "dragleave", "element": "div" }, { "type": "forwarded", "name": "drop", "element": "div" }, { "type": "forwarded", "name": "keydown", "element": "label" }, - { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "click", "element": "input" } ], "typedefs": [], diff --git a/types/FileUploader/FileUploaderDropContainer.svelte.d.ts b/types/FileUploader/FileUploaderDropContainer.svelte.d.ts index 31e6542d..45a92ae0 100644 --- a/types/FileUploader/FileUploaderDropContainer.svelte.d.ts +++ b/types/FileUploader/FileUploaderDropContainer.svelte.d.ts @@ -9,6 +9,12 @@ export interface FileUploaderDropContainerProps */ accept?: string[]; + /** + * Obtain a reference to the uploaded files + * @default [] + */ + files?: File[]; + /** * Set to `true` to allow multiple files * @default false @@ -20,7 +26,7 @@ export interface FileUploaderDropContainerProps * The default behavior does not validate files * @default (files) => files */ - validateFiles?: (files: FileList) => FileList; + validateFiles?: (files: File) => File; /** * Specify the label text @@ -68,12 +74,12 @@ export interface FileUploaderDropContainerProps export default class FileUploaderDropContainer extends SvelteComponentTyped< FileUploaderDropContainerProps, { - add: CustomEvent; + add: CustomEvent; + change: CustomEvent; dragover: WindowEventMap["dragover"]; dragleave: WindowEventMap["dragleave"]; drop: WindowEventMap["drop"]; keydown: WindowEventMap["keydown"]; - change: WindowEventMap["change"]; click: WindowEventMap["click"]; }, { labelText: {} }