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

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

Browse source 
Closes #1116
This commit is contained in:
Eric Liu 2022-02-21 08:48:39 -08:00
commit bf85af2c81
1 changed files with 17 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/FileUploader/FileUploaderButton.svelte
View file

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