@gradio/file 0.4.9 → 0.5.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 +7 -0
- package/Index.svelte +6 -8
- package/package.json +5 -5
- package/shared/FilePreview.svelte +33 -0
- package/shared/FileUpload.svelte +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @gradio/file
|
|
2
2
|
|
|
3
|
+
## 0.5.0
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#7299](https://github.com/gradio-app/gradio/pull/7299) [`f35f615`](https://github.com/gradio-app/gradio/commit/f35f615e33a5dd90bfeb106b6f5dca689849fcef) - Added remove button for every file in file preview, to remove individual file in gr.File(). Thanks [@shubhamofbce](https://github.com/shubhamofbce)!
|
|
8
|
+
- [#7183](https://github.com/gradio-app/gradio/pull/7183) [`49d9c48`](https://github.com/gradio-app/gradio/commit/49d9c48537aa706bf72628e3640389470138bdc6) - [WIP] Refactor file normalization to be in the backend and remove it from the frontend of each component. Thanks [@abidlabs](https://github.com/abidlabs)!
|
|
9
|
+
|
|
3
10
|
## 0.4.9
|
|
4
11
|
|
|
5
12
|
### Fixes
|
package/Index.svelte
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
import type { Gradio, SelectData } from "@gradio/utils";
|
|
12
12
|
import File from "./shared/File.svelte";
|
|
13
13
|
import FileUpload from "./shared/FileUpload.svelte";
|
|
14
|
-
import {
|
|
14
|
+
import type { FileData } from "@gradio/client";
|
|
15
15
|
import { Block, UploadText } from "@gradio/atoms";
|
|
16
16
|
|
|
17
17
|
import { StatusTracker } from "@gradio/statustracker";
|
|
@@ -28,7 +28,6 @@
|
|
|
28
28
|
export let show_label: boolean;
|
|
29
29
|
export let height: number | undefined = undefined;
|
|
30
30
|
|
|
31
|
-
export let proxy_url: null | string;
|
|
32
31
|
export let _selectable = false;
|
|
33
32
|
export let loading_status: LoadingStatus;
|
|
34
33
|
export let container = true;
|
|
@@ -43,12 +42,11 @@
|
|
|
43
42
|
}>;
|
|
44
43
|
export let file_count: string;
|
|
45
44
|
export let file_types: string[] = ["file"];
|
|
46
|
-
$: _value = normalise_file(value, root, proxy_url);
|
|
47
45
|
|
|
48
|
-
let old_value =
|
|
49
|
-
$: if (JSON.stringify(old_value) !== JSON.stringify(
|
|
46
|
+
let old_value = value;
|
|
47
|
+
$: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
|
|
50
48
|
gradio.dispatch("change");
|
|
51
|
-
old_value =
|
|
49
|
+
old_value = value;
|
|
52
50
|
}
|
|
53
51
|
|
|
54
52
|
let dragging = false;
|
|
@@ -79,7 +77,7 @@
|
|
|
79
77
|
<File
|
|
80
78
|
on:select={({ detail }) => gradio.dispatch("select", detail)}
|
|
81
79
|
selectable={_selectable}
|
|
82
|
-
value
|
|
80
|
+
{value}
|
|
83
81
|
{label}
|
|
84
82
|
{show_label}
|
|
85
83
|
{height}
|
|
@@ -89,7 +87,7 @@
|
|
|
89
87
|
<FileUpload
|
|
90
88
|
{label}
|
|
91
89
|
{show_label}
|
|
92
|
-
value
|
|
90
|
+
{value}
|
|
93
91
|
{file_count}
|
|
94
92
|
{file_types}
|
|
95
93
|
selectable={_selectable}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/file",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.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/client": "^0.11.0",
|
|
11
|
-
"@gradio/atoms": "^0.5.1",
|
|
12
|
-
"@gradio/statustracker": "^0.4.5",
|
|
13
10
|
"@gradio/icons": "^0.3.2",
|
|
14
|
-
"@gradio/
|
|
11
|
+
"@gradio/atoms": "^0.5.1",
|
|
12
|
+
"@gradio/client": "^0.12.0",
|
|
13
|
+
"@gradio/upload": "^0.7.2",
|
|
15
14
|
"@gradio/utils": "^0.2.2",
|
|
15
|
+
"@gradio/statustracker": "^0.4.5",
|
|
16
16
|
"@gradio/wasm": "^0.6.0"
|
|
17
17
|
},
|
|
18
18
|
"main": "./Index.svelte",
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
const dispatch = createEventDispatcher<{
|
|
9
9
|
select: SelectData;
|
|
10
|
+
change: FileData[] | FileData;
|
|
10
11
|
}>();
|
|
11
12
|
export let value: FileData | FileData[];
|
|
12
13
|
export let selectable = false;
|
|
@@ -29,6 +30,13 @@
|
|
|
29
30
|
filename_ext
|
|
30
31
|
};
|
|
31
32
|
});
|
|
33
|
+
|
|
34
|
+
function remove_file(index: number): void {
|
|
35
|
+
normalized_files.splice(index, 1);
|
|
36
|
+
normalized_files = [...normalized_files];
|
|
37
|
+
value = normalized_files;
|
|
38
|
+
dispatch("change", normalized_files);
|
|
39
|
+
}
|
|
32
40
|
</script>
|
|
33
41
|
|
|
34
42
|
<div
|
|
@@ -66,6 +74,21 @@
|
|
|
66
74
|
{i18n("file.uploading")}
|
|
67
75
|
{/if}
|
|
68
76
|
</td>
|
|
77
|
+
{#if normalized_files.length > 1}
|
|
78
|
+
<td>
|
|
79
|
+
<button
|
|
80
|
+
class="label-clear-button"
|
|
81
|
+
aria-label="Remove this file"
|
|
82
|
+
on:click={() => remove_file(i)}
|
|
83
|
+
on:keydown={(event) => {
|
|
84
|
+
if (event.key === "Enter") {
|
|
85
|
+
remove_file(i);
|
|
86
|
+
}
|
|
87
|
+
}}
|
|
88
|
+
>×
|
|
89
|
+
</button>
|
|
90
|
+
</td>
|
|
91
|
+
{/if}
|
|
69
92
|
</tr>
|
|
70
93
|
{/each}
|
|
71
94
|
</tbody>
|
|
@@ -73,6 +96,16 @@
|
|
|
73
96
|
</div>
|
|
74
97
|
|
|
75
98
|
<style>
|
|
99
|
+
.label-clear-button {
|
|
100
|
+
color: var(--body-text-color-subdued);
|
|
101
|
+
position: relative;
|
|
102
|
+
left: -3px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.label-clear-button:hover {
|
|
106
|
+
color: var(--body-text-color);
|
|
107
|
+
}
|
|
108
|
+
|
|
76
109
|
.file-preview {
|
|
77
110
|
table-layout: fixed;
|
|
78
111
|
width: var(--size-full);
|
package/shared/FileUpload.svelte
CHANGED
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
|
|
70
70
|
{#if value && (Array.isArray(value) ? value.length > 0 : true)}
|
|
71
71
|
<ModifyUpload {i18n} on:clear={handle_clear} absolute />
|
|
72
|
-
<FilePreview {i18n} on:select {selectable} {value} {height} />
|
|
72
|
+
<FilePreview {i18n} on:select {selectable} {value} {height} on:change />
|
|
73
73
|
{:else}
|
|
74
74
|
<Upload
|
|
75
75
|
on:load={handle_upload}
|