mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(file-uploader-button): support files prop (#1120)

Browse source 
Closes #1116
This commit is contained in:
metonym 2022-02-21 13:32:05 -08:00 • committed by GitHub
commit 7586b2a10f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 39 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
COMPONENT_INDEX.md
View file

@ -1263,7 +1263,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | ----------------------------------------------------------- |
| files | <code>let</code> | Yes | <code>File[]</code> | <code>[]</code> | Obtain the uploaded file names |
| files | <code>let</code> | Yes | <code>File[]</code> | <code>[]</code> | Obtain a reference to the uploaded files |
| status | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| 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 |
@ -1300,6 +1300,7 @@ None.
| :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| labelText | <code>let</code> | Yes | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| 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 |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |

13
docs/src/COMPONENT_API.json
View file

@ -3481,7 +3481,7 @@
{
"name": "files",
"kind": "let",
"description": "Obtain the uploaded file names",
"description": "Obtain a reference to the uploaded files",
"type": "File[]",
"value": "[]",
"isFunction": false,
@ -3607,6 +3607,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",

2
src/FileUploader/FileUploader.svelte
View file

@ -18,7 +18,7 @@
export let accept = [];
/**
* Obtain the uploaded file names
* Obtain a reference to the uploaded files
* @type {File[]}
*/
export let files = [];

21
src/FileUploader/FileUploaderButton.svelte
View file

@ -9,6 +9,12 @@
*/
export let accept = [];
/**
* Obtain a reference to the uploaded files
* @type {File[]}
*/
export let files = [];
/** Set to `true` to allow multiple files */
export let multiple = false;
@ -45,6 +51,13 @@
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
let initialLabelText = labelText;
$: if (ref && files.length === 0) {
labelText = initialLabelText;
ref.value = null;
}
</script>
<label
@ -80,13 +93,13 @@
class:bx--visually-hidden="{true}"
{...$$restProps}
on:change|stopPropagation="{({ target }) => {
const files = target.files;
const length = files.length;
files = [...target.files];
if (files && !disableLabelChanges) {
labelText = length > 1 ? `${length} files` : files[0].name;
labelText = files.length > 1 ? `${files.length} files` : files[0].name;
}
dispatch('change', [...files]);
dispatch('change', files);
}}"
on:click
on:click="{({ target }) => {

2
types/FileUploader/FileUploader.svelte.d.ts vendored
View file

@ -16,7 +16,7 @@ export interface FileUploaderProps
accept?: string[];
/**
* Obtain the uploaded file names
* Obtain a reference to the uploaded files
* @default []
*/
files?: File[];

6
types/FileUploader/FileUploaderButton.svelte.d.ts vendored
View file

@ -9,6 +9,12 @@ export interface FileUploaderButtonProps
*/
accept?: string[];
/**
* Obtain a reference to the uploaded files
* @default []
*/
files?: File[];
/**
* Set to `true` to allow multiple files
* @default false