@gradio/file 0.10.5 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/Index.svelte +2 -0
- package/dist/Index.svelte +1 -0
- package/dist/Index.svelte.d.ts +7 -4
- package/dist/shared/File.svelte +1 -1
- package/dist/shared/File.svelte.d.ts +2 -1
- package/dist/shared/FilePreview.svelte +4 -0
- package/dist/shared/FilePreview.svelte.d.ts +2 -1
- package/dist/shared/FileUpload.svelte +36 -4
- package/dist/shared/FileUpload.svelte.d.ts +3 -3
- package/package.json +8 -8
- package/shared/File.svelte +1 -1
- package/shared/FilePreview.svelte +6 -0
- package/shared/FileUpload.svelte +36 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @gradio/file
|
|
2
2
|
|
|
3
|
+
## 0.11.0
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#9891](https://github.com/gradio-app/gradio/pull/9891) [`fc12496`](https://github.com/gradio-app/gradio/commit/fc124964a1b4922e54a4ca4755f0a536dfae1a21) - Allow uploading more files in gr.File. Thanks @hannahblair!
|
|
8
|
+
- [#9887](https://github.com/gradio-app/gradio/pull/9887) [`d407c00`](https://github.com/gradio-app/gradio/commit/d407c007153705a7f5446f4601c12f208ec32a5b) - Add `.download()` event to `gr.File`. Thanks @abidlabs!
|
|
9
|
+
|
|
10
|
+
### Dependency updates
|
|
11
|
+
|
|
12
|
+
- @gradio/statustracker@0.9.4
|
|
13
|
+
- @gradio/atoms@0.11.0
|
|
14
|
+
- @gradio/upload@0.14.0
|
|
15
|
+
- @gradio/wasm@0.15.0
|
|
16
|
+
|
|
17
|
+
## 0.10.6
|
|
18
|
+
|
|
19
|
+
### Dependency updates
|
|
20
|
+
|
|
21
|
+
- @gradio/statustracker@0.9.3
|
|
22
|
+
- @gradio/atoms@0.10.1
|
|
23
|
+
- @gradio/client@1.7.1
|
|
24
|
+
- @gradio/upload@0.13.5
|
|
25
|
+
|
|
3
26
|
## 0.10.5
|
|
4
27
|
|
|
5
28
|
### Dependency updates
|
package/Index.svelte
CHANGED
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
select: SelectData;
|
|
42
42
|
clear_status: LoadingStatus;
|
|
43
43
|
delete: FileData;
|
|
44
|
+
download: FileData;
|
|
44
45
|
}>;
|
|
45
46
|
export let file_count: "single" | "multiple" | "directory";
|
|
46
47
|
export let file_types: string[] = ["file"];
|
|
@@ -82,6 +83,7 @@
|
|
|
82
83
|
{#if !interactive}
|
|
83
84
|
<File
|
|
84
85
|
on:select={({ detail }) => gradio.dispatch("select", detail)}
|
|
86
|
+
on:download={({ detail }) => gradio.dispatch("download", detail)}
|
|
85
87
|
selectable={_selectable}
|
|
86
88
|
{value}
|
|
87
89
|
{label}
|
package/dist/Index.svelte
CHANGED
package/dist/Index.svelte.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ declare const __propDef: {
|
|
|
30
30
|
select: SelectData;
|
|
31
31
|
clear_status: LoadingStatus;
|
|
32
32
|
delete: FileData;
|
|
33
|
+
download: FileData;
|
|
33
34
|
}>;
|
|
34
35
|
file_count: "single" | "multiple" | "directory";
|
|
35
36
|
file_types?: string[] | undefined;
|
|
@@ -53,9 +54,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
|
|
|
53
54
|
get visible(): boolean | undefined;
|
|
54
55
|
/**accessor*/
|
|
55
56
|
set visible(_: boolean | undefined);
|
|
56
|
-
get value():
|
|
57
|
+
get value(): any;
|
|
57
58
|
/**accessor*/
|
|
58
|
-
set value(_:
|
|
59
|
+
set value(_: any);
|
|
59
60
|
get interactive(): boolean;
|
|
60
61
|
/**accessor*/
|
|
61
62
|
set interactive(_: boolean);
|
|
@@ -94,6 +95,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
|
|
|
94
95
|
select: SelectData;
|
|
95
96
|
clear_status: LoadingStatus;
|
|
96
97
|
delete: FileData;
|
|
98
|
+
download: FileData;
|
|
97
99
|
}>;
|
|
98
100
|
/**accessor*/
|
|
99
101
|
set gradio(_: Gradio<{
|
|
@@ -104,10 +106,11 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
|
|
|
104
106
|
select: SelectData;
|
|
105
107
|
clear_status: LoadingStatus;
|
|
106
108
|
delete: FileData;
|
|
109
|
+
download: FileData;
|
|
107
110
|
}>);
|
|
108
|
-
get file_count(): "
|
|
111
|
+
get file_count(): "single" | "multiple" | "directory";
|
|
109
112
|
/**accessor*/
|
|
110
|
-
set file_count(_: "
|
|
113
|
+
set file_count(_: "single" | "multiple" | "directory");
|
|
111
114
|
get file_types(): string[] | undefined;
|
|
112
115
|
/**accessor*/
|
|
113
116
|
set file_types(_: string[] | undefined);
|
package/dist/shared/File.svelte
CHANGED
|
@@ -17,7 +17,7 @@ export let i18n;
|
|
|
17
17
|
/>
|
|
18
18
|
|
|
19
19
|
{#if value && (Array.isArray(value) ? value.length > 0 : true)}
|
|
20
|
-
<FilePreview {i18n} {selectable} on:select {value} {height} />
|
|
20
|
+
<FilePreview {i18n} {selectable} on:select on:download {value} {height} />
|
|
21
21
|
{:else}
|
|
22
22
|
<Empty unpadded_box={true} size="large"><File /></Empty>
|
|
23
23
|
{/if}
|
|
@@ -3,7 +3,7 @@ import type { FileData } from "@gradio/client";
|
|
|
3
3
|
import type { I18nFormatter } from "@gradio/utils";
|
|
4
4
|
declare const __propDef: {
|
|
5
5
|
props: {
|
|
6
|
-
value?:
|
|
6
|
+
value?: FileData | FileData[] | null;
|
|
7
7
|
label: string;
|
|
8
8
|
show_label?: boolean | undefined;
|
|
9
9
|
selectable?: boolean | undefined;
|
|
@@ -12,6 +12,7 @@ declare const __propDef: {
|
|
|
12
12
|
};
|
|
13
13
|
events: {
|
|
14
14
|
select: CustomEvent<import("@gradio/utils").SelectData>;
|
|
15
|
+
download: CustomEvent<FileData>;
|
|
15
16
|
} & {
|
|
16
17
|
[evt: string]: CustomEvent<any>;
|
|
17
18
|
};
|
|
@@ -37,6 +37,9 @@ function remove_file(index) {
|
|
|
37
37
|
dispatch("delete", removed[0]);
|
|
38
38
|
dispatch("change", normalized_files);
|
|
39
39
|
}
|
|
40
|
+
function handle_download(file) {
|
|
41
|
+
dispatch("download", file);
|
|
42
|
+
}
|
|
40
43
|
const is_browser = typeof window !== "undefined";
|
|
41
44
|
</script>
|
|
42
45
|
|
|
@@ -63,6 +66,7 @@ const is_browser = typeof window !== "undefined";
|
|
|
63
66
|
{#if file.url}
|
|
64
67
|
<DownloadLink
|
|
65
68
|
href={file.url}
|
|
69
|
+
on:click={() => handle_download(file)}
|
|
66
70
|
download={is_browser && window.__is_colab__
|
|
67
71
|
? null
|
|
68
72
|
: file.orig_name}
|
|
@@ -10,8 +10,9 @@ declare const __propDef: {
|
|
|
10
10
|
};
|
|
11
11
|
events: {
|
|
12
12
|
select: CustomEvent<SelectData>;
|
|
13
|
-
change: CustomEvent<
|
|
13
|
+
change: CustomEvent<any>;
|
|
14
14
|
delete: CustomEvent<FileData>;
|
|
15
|
+
download: CustomEvent<FileData>;
|
|
15
16
|
} & {
|
|
16
17
|
[evt: string]: CustomEvent<any>;
|
|
17
18
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script>import { createEventDispatcher, tick } from "svelte";
|
|
2
2
|
import { Upload, ModifyUpload } from "@gradio/upload";
|
|
3
|
-
import { BlockLabel } from "@gradio/atoms";
|
|
4
|
-
import { File } from "@gradio/icons";
|
|
3
|
+
import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
|
|
4
|
+
import { File, Clear, Upload as UploadIcon } from "@gradio/icons";
|
|
5
5
|
import FilePreview from "./FilePreview.svelte";
|
|
6
6
|
export let value;
|
|
7
7
|
export let label;
|
|
@@ -19,7 +19,13 @@ export let uploading = false;
|
|
|
19
19
|
async function handle_upload({
|
|
20
20
|
detail
|
|
21
21
|
}) {
|
|
22
|
-
value
|
|
22
|
+
if (Array.isArray(value)) {
|
|
23
|
+
value = [...value, ...Array.isArray(detail) ? detail : [detail]];
|
|
24
|
+
} else if (value) {
|
|
25
|
+
value = [value, ...Array.isArray(detail) ? detail : [detail]];
|
|
26
|
+
} else {
|
|
27
|
+
value = detail;
|
|
28
|
+
}
|
|
23
29
|
await tick();
|
|
24
30
|
dispatch("change", value);
|
|
25
31
|
dispatch("upload", detail);
|
|
@@ -38,7 +44,33 @@ $:
|
|
|
38
44
|
<BlockLabel {show_label} Icon={File} float={!value} label={label || "File"} />
|
|
39
45
|
|
|
40
46
|
{#if value && (Array.isArray(value) ? value.length > 0 : true)}
|
|
41
|
-
<
|
|
47
|
+
<IconButtonWrapper>
|
|
48
|
+
<IconButton Icon={UploadIcon} label={i18n("common.upload")}>
|
|
49
|
+
<Upload
|
|
50
|
+
icon_upload={true}
|
|
51
|
+
on:load={handle_upload}
|
|
52
|
+
filetype={file_types}
|
|
53
|
+
{file_count}
|
|
54
|
+
{max_file_size}
|
|
55
|
+
{root}
|
|
56
|
+
bind:dragging
|
|
57
|
+
bind:uploading
|
|
58
|
+
on:error
|
|
59
|
+
{stream_handler}
|
|
60
|
+
{upload}
|
|
61
|
+
/>
|
|
62
|
+
</IconButton>
|
|
63
|
+
<IconButton
|
|
64
|
+
Icon={Clear}
|
|
65
|
+
label={i18n("common.clear")}
|
|
66
|
+
on:click={(event) => {
|
|
67
|
+
dispatch("clear");
|
|
68
|
+
event.stopPropagation();
|
|
69
|
+
handle_clear();
|
|
70
|
+
}}
|
|
71
|
+
/>
|
|
72
|
+
</IconButtonWrapper>
|
|
73
|
+
|
|
42
74
|
<FilePreview
|
|
43
75
|
{i18n}
|
|
44
76
|
on:select
|
|
@@ -18,14 +18,14 @@ declare const __propDef: {
|
|
|
18
18
|
uploading?: boolean | undefined;
|
|
19
19
|
};
|
|
20
20
|
events: {
|
|
21
|
+
error: CustomEvent<any>;
|
|
21
22
|
select: CustomEvent<import("@gradio/utils").SelectData>;
|
|
22
23
|
change: CustomEvent<any>;
|
|
23
24
|
delete: CustomEvent<FileData>;
|
|
24
|
-
error: CustomEvent<any>;
|
|
25
25
|
clear: CustomEvent<undefined>;
|
|
26
26
|
drag: CustomEvent<boolean>;
|
|
27
|
-
upload: CustomEvent<
|
|
28
|
-
load: CustomEvent<
|
|
27
|
+
upload: CustomEvent<any>;
|
|
28
|
+
load: CustomEvent<any>;
|
|
29
29
|
} & {
|
|
30
30
|
[evt: string]: CustomEvent<any>;
|
|
31
31
|
};
|
package/package.json
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/file",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
7
7
|
"license": "ISC",
|
|
8
8
|
"private": false,
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@gradio/atoms": "^0.
|
|
11
|
-
"@gradio/client": "^1.7.
|
|
10
|
+
"@gradio/atoms": "^0.11.0",
|
|
11
|
+
"@gradio/client": "^1.7.1",
|
|
12
12
|
"@gradio/icons": "^0.8.1",
|
|
13
|
-
"@gradio/
|
|
14
|
-
"@gradio/
|
|
15
|
-
"@gradio/
|
|
16
|
-
"@gradio/
|
|
13
|
+
"@gradio/statustracker": "^0.9.4",
|
|
14
|
+
"@gradio/upload": "^0.14.0",
|
|
15
|
+
"@gradio/utils": "^0.7.0",
|
|
16
|
+
"@gradio/wasm": "^0.15.0"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@gradio/preview": "^0.
|
|
19
|
+
"@gradio/preview": "^0.13.0"
|
|
20
20
|
},
|
|
21
21
|
"main": "./Index.svelte",
|
|
22
22
|
"main_changeset": true,
|
package/shared/File.svelte
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
/>
|
|
22
22
|
|
|
23
23
|
{#if value && (Array.isArray(value) ? value.length > 0 : true)}
|
|
24
|
-
<FilePreview {i18n} {selectable} on:select {value} {height} />
|
|
24
|
+
<FilePreview {i18n} {selectable} on:select on:download {value} {height} />
|
|
25
25
|
{:else}
|
|
26
26
|
<Empty unpadded_box={true} size="large"><File /></Empty>
|
|
27
27
|
{/if}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
select: SelectData;
|
|
10
10
|
change: FileData[] | FileData;
|
|
11
11
|
delete: FileData;
|
|
12
|
+
download: FileData;
|
|
12
13
|
}>();
|
|
13
14
|
export let value: FileData | FileData[];
|
|
14
15
|
export let selectable = false;
|
|
@@ -56,6 +57,10 @@
|
|
|
56
57
|
dispatch("change", normalized_files);
|
|
57
58
|
}
|
|
58
59
|
|
|
60
|
+
function handle_download(file: FileData): void {
|
|
61
|
+
dispatch("download", file);
|
|
62
|
+
}
|
|
63
|
+
|
|
59
64
|
const is_browser = typeof window !== "undefined";
|
|
60
65
|
</script>
|
|
61
66
|
|
|
@@ -82,6 +87,7 @@
|
|
|
82
87
|
{#if file.url}
|
|
83
88
|
<DownloadLink
|
|
84
89
|
href={file.url}
|
|
90
|
+
on:click={() => handle_download(file)}
|
|
85
91
|
download={is_browser && window.__is_colab__
|
|
86
92
|
? null
|
|
87
93
|
: file.orig_name}
|
package/shared/FileUpload.svelte
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { createEventDispatcher, tick } from "svelte";
|
|
3
3
|
import { Upload, ModifyUpload } from "@gradio/upload";
|
|
4
4
|
import type { FileData, Client } from "@gradio/client";
|
|
5
|
-
import { BlockLabel } from "@gradio/atoms";
|
|
6
|
-
import { File } from "@gradio/icons";
|
|
5
|
+
import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
|
|
6
|
+
import { File, Clear, Upload as UploadIcon } from "@gradio/icons";
|
|
7
7
|
|
|
8
8
|
import FilePreview from "./FilePreview.svelte";
|
|
9
9
|
import type { I18nFormatter } from "@gradio/utils";
|
|
@@ -26,7 +26,13 @@
|
|
|
26
26
|
async function handle_upload({
|
|
27
27
|
detail
|
|
28
28
|
}: CustomEvent<FileData | FileData[]>): Promise<void> {
|
|
29
|
-
value
|
|
29
|
+
if (Array.isArray(value)) {
|
|
30
|
+
value = [...value, ...(Array.isArray(detail) ? detail : [detail])];
|
|
31
|
+
} else if (value) {
|
|
32
|
+
value = [value, ...(Array.isArray(detail) ? detail : [detail])];
|
|
33
|
+
} else {
|
|
34
|
+
value = detail;
|
|
35
|
+
}
|
|
30
36
|
await tick();
|
|
31
37
|
dispatch("change", value);
|
|
32
38
|
dispatch("upload", detail);
|
|
@@ -54,7 +60,33 @@
|
|
|
54
60
|
<BlockLabel {show_label} Icon={File} float={!value} label={label || "File"} />
|
|
55
61
|
|
|
56
62
|
{#if value && (Array.isArray(value) ? value.length > 0 : true)}
|
|
57
|
-
<
|
|
63
|
+
<IconButtonWrapper>
|
|
64
|
+
<IconButton Icon={UploadIcon} label={i18n("common.upload")}>
|
|
65
|
+
<Upload
|
|
66
|
+
icon_upload={true}
|
|
67
|
+
on:load={handle_upload}
|
|
68
|
+
filetype={file_types}
|
|
69
|
+
{file_count}
|
|
70
|
+
{max_file_size}
|
|
71
|
+
{root}
|
|
72
|
+
bind:dragging
|
|
73
|
+
bind:uploading
|
|
74
|
+
on:error
|
|
75
|
+
{stream_handler}
|
|
76
|
+
{upload}
|
|
77
|
+
/>
|
|
78
|
+
</IconButton>
|
|
79
|
+
<IconButton
|
|
80
|
+
Icon={Clear}
|
|
81
|
+
label={i18n("common.clear")}
|
|
82
|
+
on:click={(event) => {
|
|
83
|
+
dispatch("clear");
|
|
84
|
+
event.stopPropagation();
|
|
85
|
+
handle_clear();
|
|
86
|
+
}}
|
|
87
|
+
/>
|
|
88
|
+
</IconButtonWrapper>
|
|
89
|
+
|
|
58
90
|
<FilePreview
|
|
59
91
|
{i18n}
|
|
60
92
|
on:select
|