@gradio/uploadbutton 0.6.18 → 0.6.19-beta.1
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 +22 -0
- package/UploadButton.test.ts +1 -1
- package/dist/Index.svelte +53 -0
- package/dist/Index.svelte.d.ts +37 -0
- package/dist/shared/UploadButton.svelte +110 -0
- package/dist/shared/UploadButton.svelte.d.ts +39 -0
- package/package.json +14 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @gradio/uploadbutton
|
|
2
2
|
|
|
3
|
+
## 0.6.19-beta.1
|
|
4
|
+
|
|
5
|
+
### Dependency updates
|
|
6
|
+
|
|
7
|
+
- @gradio/utils@0.7.0-beta.1
|
|
8
|
+
- @gradio/client@1.6.0-beta.1
|
|
9
|
+
- @gradio/upload@0.12.4-beta.1
|
|
10
|
+
- @gradio/button@0.3.0-beta.1
|
|
11
|
+
|
|
12
|
+
## 0.6.19-beta.0
|
|
13
|
+
|
|
14
|
+
### Fixes
|
|
15
|
+
|
|
16
|
+
- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types. Thanks @pngwn!
|
|
17
|
+
|
|
18
|
+
### Dependency updates
|
|
19
|
+
|
|
20
|
+
- @gradio/utils@0.7.0-beta.0
|
|
21
|
+
- @gradio/client@1.6.0-beta.0
|
|
22
|
+
- @gradio/button@0.2.51-beta.0
|
|
23
|
+
- @gradio/upload@0.12.4-beta.0
|
|
24
|
+
|
|
3
25
|
## 0.6.18
|
|
4
26
|
|
|
5
27
|
### Features
|
package/UploadButton.test.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { test, describe, expect, vi, afterEach, assert } from "vitest";
|
|
2
|
-
import { cleanup, render } from "@
|
|
2
|
+
import { cleanup, render } from "@self/tootils";
|
|
3
3
|
import event from "@testing-library/user-event";
|
|
4
4
|
import { setupi18n } from "../core/src/i18n";
|
|
5
5
|
import UploadButton from "./Index.svelte";
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<script context="module">export { default as BaseUploadButton } from "./shared/UploadButton.svelte";
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<script>import UploadButton from "./shared/UploadButton.svelte";
|
|
5
|
+
export let elem_id = "";
|
|
6
|
+
export let elem_classes = [];
|
|
7
|
+
export let visible = true;
|
|
8
|
+
export let label;
|
|
9
|
+
export let value;
|
|
10
|
+
export let file_count;
|
|
11
|
+
export let file_types = [];
|
|
12
|
+
export let root;
|
|
13
|
+
export let size = "lg";
|
|
14
|
+
export let scale = null;
|
|
15
|
+
export let icon = null;
|
|
16
|
+
export let min_width = void 0;
|
|
17
|
+
export let variant = "secondary";
|
|
18
|
+
export let gradio;
|
|
19
|
+
export let interactive;
|
|
20
|
+
$:
|
|
21
|
+
disabled = !interactive;
|
|
22
|
+
async function handle_event(detail, event) {
|
|
23
|
+
value = detail;
|
|
24
|
+
gradio.dispatch(event);
|
|
25
|
+
}
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<UploadButton
|
|
29
|
+
{elem_id}
|
|
30
|
+
{elem_classes}
|
|
31
|
+
{visible}
|
|
32
|
+
{file_count}
|
|
33
|
+
{file_types}
|
|
34
|
+
{size}
|
|
35
|
+
{scale}
|
|
36
|
+
{icon}
|
|
37
|
+
{min_width}
|
|
38
|
+
{root}
|
|
39
|
+
{value}
|
|
40
|
+
{disabled}
|
|
41
|
+
{variant}
|
|
42
|
+
{label}
|
|
43
|
+
max_file_size={gradio.max_file_size}
|
|
44
|
+
on:click={() => gradio.dispatch("click")}
|
|
45
|
+
on:change={({ detail }) => handle_event(detail, "change")}
|
|
46
|
+
on:upload={({ detail }) => handle_event(detail, "upload")}
|
|
47
|
+
on:error={({ detail }) => {
|
|
48
|
+
gradio.dispatch("error", detail);
|
|
49
|
+
}}
|
|
50
|
+
upload={gradio.client.upload}
|
|
51
|
+
>
|
|
52
|
+
{label ? gradio.i18n(label) : ""}
|
|
53
|
+
</UploadButton>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
export { default as BaseUploadButton } from "./shared/UploadButton.svelte";
|
|
3
|
+
import type { Gradio } from "@gradio/utils";
|
|
4
|
+
import type { FileData } from "@gradio/client";
|
|
5
|
+
declare const __propDef: {
|
|
6
|
+
props: {
|
|
7
|
+
elem_id?: string | undefined;
|
|
8
|
+
elem_classes?: string[] | undefined;
|
|
9
|
+
visible?: boolean | undefined;
|
|
10
|
+
label: string | null;
|
|
11
|
+
value: null | FileData | FileData[];
|
|
12
|
+
file_count: string;
|
|
13
|
+
file_types?: string[] | undefined;
|
|
14
|
+
root: string;
|
|
15
|
+
size?: ("sm" | "lg") | undefined;
|
|
16
|
+
scale?: (number | null) | undefined;
|
|
17
|
+
icon?: (FileData | null) | undefined;
|
|
18
|
+
min_width?: number | undefined;
|
|
19
|
+
variant?: ("primary" | "secondary" | "stop") | undefined;
|
|
20
|
+
gradio: Gradio<{
|
|
21
|
+
change: never;
|
|
22
|
+
upload: never;
|
|
23
|
+
click: never;
|
|
24
|
+
error: string;
|
|
25
|
+
}>;
|
|
26
|
+
interactive: boolean;
|
|
27
|
+
};
|
|
28
|
+
events: {
|
|
29
|
+
[evt: string]: CustomEvent<any>;
|
|
30
|
+
};
|
|
31
|
+
slots: {};
|
|
32
|
+
};
|
|
33
|
+
export type IndexProps = typeof __propDef.props;
|
|
34
|
+
export type IndexEvents = typeof __propDef.events;
|
|
35
|
+
export type IndexSlots = typeof __propDef.slots;
|
|
36
|
+
export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
|
|
37
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
<script>import { tick, createEventDispatcher } from "svelte";
|
|
2
|
+
import { BaseButton } from "@gradio/button";
|
|
3
|
+
import { prepare_files } from "@gradio/client";
|
|
4
|
+
export let elem_id = "";
|
|
5
|
+
export let elem_classes = [];
|
|
6
|
+
export let visible = true;
|
|
7
|
+
export let label;
|
|
8
|
+
export let value;
|
|
9
|
+
export let file_count;
|
|
10
|
+
export let file_types = [];
|
|
11
|
+
export let root;
|
|
12
|
+
export let size = "lg";
|
|
13
|
+
export let icon = null;
|
|
14
|
+
export let scale = null;
|
|
15
|
+
export let min_width = void 0;
|
|
16
|
+
export let variant = "secondary";
|
|
17
|
+
export let disabled = false;
|
|
18
|
+
export let max_file_size = null;
|
|
19
|
+
export let upload;
|
|
20
|
+
const dispatch = createEventDispatcher();
|
|
21
|
+
let hidden_upload;
|
|
22
|
+
let accept_file_types;
|
|
23
|
+
if (file_types == null) {
|
|
24
|
+
accept_file_types = null;
|
|
25
|
+
} else {
|
|
26
|
+
file_types = file_types.map((x) => {
|
|
27
|
+
if (x.startsWith(".")) {
|
|
28
|
+
return x;
|
|
29
|
+
}
|
|
30
|
+
return x + "/*";
|
|
31
|
+
});
|
|
32
|
+
accept_file_types = file_types.join(", ");
|
|
33
|
+
}
|
|
34
|
+
function open_file_upload() {
|
|
35
|
+
dispatch("click");
|
|
36
|
+
hidden_upload.click();
|
|
37
|
+
}
|
|
38
|
+
async function load_files(files) {
|
|
39
|
+
let _files = Array.from(files);
|
|
40
|
+
if (!files.length) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
if (file_count === "single") {
|
|
44
|
+
_files = [files[0]];
|
|
45
|
+
}
|
|
46
|
+
let all_file_data = await prepare_files(_files);
|
|
47
|
+
await tick();
|
|
48
|
+
try {
|
|
49
|
+
all_file_data = (await upload(all_file_data, root, void 0, max_file_size ?? Infinity))?.filter((x) => x !== null);
|
|
50
|
+
} catch (e) {
|
|
51
|
+
dispatch("error", e.message);
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
value = file_count === "single" ? all_file_data?.[0] : all_file_data;
|
|
55
|
+
dispatch("change", value);
|
|
56
|
+
dispatch("upload", value);
|
|
57
|
+
}
|
|
58
|
+
async function load_files_from_upload(e) {
|
|
59
|
+
const target = e.target;
|
|
60
|
+
if (!target.files)
|
|
61
|
+
return;
|
|
62
|
+
await load_files(target.files);
|
|
63
|
+
}
|
|
64
|
+
function clear_input_value(e) {
|
|
65
|
+
const target = e.target;
|
|
66
|
+
if (target.value)
|
|
67
|
+
target.value = "";
|
|
68
|
+
}
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<input
|
|
72
|
+
class="hide"
|
|
73
|
+
accept={accept_file_types}
|
|
74
|
+
type="file"
|
|
75
|
+
bind:this={hidden_upload}
|
|
76
|
+
on:change={load_files_from_upload}
|
|
77
|
+
on:click={clear_input_value}
|
|
78
|
+
multiple={file_count === "multiple" || undefined}
|
|
79
|
+
webkitdirectory={file_count === "directory" || undefined}
|
|
80
|
+
mozdirectory={file_count === "directory" || undefined}
|
|
81
|
+
data-testid="{label}-upload-button"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<BaseButton
|
|
85
|
+
{size}
|
|
86
|
+
{variant}
|
|
87
|
+
{elem_id}
|
|
88
|
+
{elem_classes}
|
|
89
|
+
{visible}
|
|
90
|
+
on:click={open_file_upload}
|
|
91
|
+
{scale}
|
|
92
|
+
{min_width}
|
|
93
|
+
{disabled}
|
|
94
|
+
>
|
|
95
|
+
{#if icon}
|
|
96
|
+
<img class="button-icon" src={icon.url} alt={`${value} icon`} />
|
|
97
|
+
{/if}
|
|
98
|
+
<slot />
|
|
99
|
+
</BaseButton>
|
|
100
|
+
|
|
101
|
+
<style>
|
|
102
|
+
.hide {
|
|
103
|
+
display: none;
|
|
104
|
+
}
|
|
105
|
+
.button-icon {
|
|
106
|
+
width: var(--text-xl);
|
|
107
|
+
height: var(--text-xl);
|
|
108
|
+
margin-right: var(--spacing-xl);
|
|
109
|
+
}
|
|
110
|
+
</style>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import { type FileData, type Client } from "@gradio/client";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
elem_id?: string | undefined;
|
|
6
|
+
elem_classes?: string[] | undefined;
|
|
7
|
+
visible?: boolean | undefined;
|
|
8
|
+
label: string | null;
|
|
9
|
+
value: null | FileData | FileData[];
|
|
10
|
+
file_count: string;
|
|
11
|
+
file_types?: string[] | undefined;
|
|
12
|
+
root: string;
|
|
13
|
+
size?: ("sm" | "lg") | undefined;
|
|
14
|
+
icon?: (FileData | null) | undefined;
|
|
15
|
+
scale?: (number | null) | undefined;
|
|
16
|
+
min_width?: number | undefined;
|
|
17
|
+
variant?: ("primary" | "secondary" | "stop") | undefined;
|
|
18
|
+
disabled?: boolean | undefined;
|
|
19
|
+
max_file_size?: (number | null) | undefined;
|
|
20
|
+
upload: Client["upload"];
|
|
21
|
+
};
|
|
22
|
+
events: {
|
|
23
|
+
click: CustomEvent<any>;
|
|
24
|
+
error: CustomEvent<any>;
|
|
25
|
+
change: CustomEvent<any>;
|
|
26
|
+
upload: CustomEvent<any>;
|
|
27
|
+
} & {
|
|
28
|
+
[evt: string]: CustomEvent<any>;
|
|
29
|
+
};
|
|
30
|
+
slots: {
|
|
31
|
+
default: {};
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
export type UploadButtonProps = typeof __propDef.props;
|
|
35
|
+
export type UploadButtonEvents = typeof __propDef.events;
|
|
36
|
+
export type UploadButtonSlots = typeof __propDef.slots;
|
|
37
|
+
export default class UploadButton extends SvelteComponent<UploadButtonProps, UploadButtonEvents, UploadButtonSlots> {
|
|
38
|
+
}
|
|
39
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/uploadbutton",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.19-beta.1",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -8,18 +8,25 @@
|
|
|
8
8
|
"private": false,
|
|
9
9
|
"main_changeset": true,
|
|
10
10
|
"exports": {
|
|
11
|
-
".":
|
|
11
|
+
".": {
|
|
12
|
+
"gradio": "./Index.svelte",
|
|
13
|
+
"svelte": "./dist/Index.svelte",
|
|
14
|
+
"types": "./dist/Index.svelte.d.ts"
|
|
15
|
+
},
|
|
12
16
|
"./package.json": "./package.json"
|
|
13
17
|
},
|
|
14
18
|
"main": "./Index.svelte",
|
|
15
19
|
"dependencies": {
|
|
16
|
-
"@gradio/button": "^0.
|
|
17
|
-
"@gradio/
|
|
18
|
-
"@gradio/
|
|
19
|
-
"@gradio/utils": "^0.
|
|
20
|
+
"@gradio/button": "^0.3.0-beta.1",
|
|
21
|
+
"@gradio/upload": "^0.12.4-beta.1",
|
|
22
|
+
"@gradio/client": "^1.6.0-beta.1",
|
|
23
|
+
"@gradio/utils": "^0.7.0-beta.1"
|
|
20
24
|
},
|
|
21
25
|
"devDependencies": {
|
|
22
|
-
"@gradio/preview": "^0.11.0"
|
|
26
|
+
"@gradio/preview": "^0.11.1-beta.0"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"svelte": "^4.0.0"
|
|
23
30
|
},
|
|
24
31
|
"repository": {
|
|
25
32
|
"type": "git",
|