@gradio/upload 0.5.8 → 0.6.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 +16 -0
- package/package.json +3 -3
- package/src/Upload.svelte +11 -5
- package/src/UploadProgress.svelte +13 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @gradio/upload
|
|
2
2
|
|
|
3
|
+
## 0.6.1
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#6982](https://github.com/gradio-app/gradio/pull/6982) [`3f139c7`](https://github.com/gradio-app/gradio/commit/3f139c7c995f749562bb007d2a567bb167669de9) - Fix File drag and drop for specific file_types. Thanks [@dawoodkhan82](https://github.com/dawoodkhan82)!
|
|
8
|
+
|
|
9
|
+
## 0.6.0
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- [#6965](https://github.com/gradio-app/gradio/pull/6965) [`5d00dd3`](https://github.com/gradio-app/gradio/commit/5d00dd37ca14bbfef2ceac550b29dbe05ba8cab0) - Make <UploadProgress /> Wasm-compatible. Thanks [@whitphx](https://github.com/whitphx)!
|
|
14
|
+
|
|
15
|
+
### Fixes
|
|
16
|
+
|
|
17
|
+
- [#6969](https://github.com/gradio-app/gradio/pull/6969) [`793bf8f`](https://github.com/gradio-app/gradio/commit/793bf8f7b1943f265c5d016c1a0c682ee549232a) - Display pending file in `<Upload />` while waiting for upload request. Thanks [@hannahblair](https://github.com/hannahblair)!
|
|
18
|
+
|
|
3
19
|
## 0.5.8
|
|
4
20
|
|
|
5
21
|
### Features
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/upload",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.ts",
|
|
7
7
|
"author": "",
|
|
8
8
|
"license": "ISC",
|
|
9
9
|
"dependencies": {
|
|
10
|
+
"@gradio/client": "^0.10.1",
|
|
10
11
|
"@gradio/atoms": "^0.4.1",
|
|
11
|
-
"@gradio/
|
|
12
|
+
"@gradio/upload": "^0.6.1",
|
|
12
13
|
"@gradio/utils": "^0.2.0",
|
|
13
|
-
"@gradio/upload": "^0.5.8",
|
|
14
14
|
"@gradio/icons": "^0.3.2"
|
|
15
15
|
},
|
|
16
16
|
"main_changeset": true,
|
package/src/Upload.svelte
CHANGED
|
@@ -129,11 +129,16 @@
|
|
|
129
129
|
async function loadFilesFromDrop(e: DragEvent): Promise<void> {
|
|
130
130
|
dragging = false;
|
|
131
131
|
if (!e.dataTransfer?.files) return;
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
132
|
+
const files_to_load = Array.from(e.dataTransfer.files).filter((file) => {
|
|
133
|
+
const file_extension = "." + file.name.split(".").pop();
|
|
134
|
+
if (file.type && is_valid_mimetype(filetype, file.type)) {
|
|
135
|
+
return true;
|
|
136
|
+
}
|
|
137
|
+
if (
|
|
138
|
+
file_extension && Array.isArray(filetype)
|
|
139
|
+
? filetype.includes(file_extension)
|
|
140
|
+
: file_extension === filetype
|
|
141
|
+
) {
|
|
137
142
|
return true;
|
|
138
143
|
}
|
|
139
144
|
dispatch("error", `Invalid file type only ${filetype} allowed.`);
|
|
@@ -182,6 +187,7 @@
|
|
|
182
187
|
<slot />
|
|
183
188
|
<input
|
|
184
189
|
aria-label="file upload"
|
|
190
|
+
data-testid="file-upload"
|
|
185
191
|
type="file"
|
|
186
192
|
bind:this={hidden_upload}
|
|
187
193
|
on:change={load_files_from_upload}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { FileData } from "@gradio/client";
|
|
3
|
-
import { onMount, createEventDispatcher } from "svelte";
|
|
3
|
+
import { onMount, createEventDispatcher, getContext } from "svelte";
|
|
4
4
|
|
|
5
5
|
type FileDataWithProgress = FileData & { progress: number };
|
|
6
6
|
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
let event_source: EventSource;
|
|
12
12
|
let progress = false;
|
|
13
13
|
let current_file_upload: FileDataWithProgress;
|
|
14
|
+
let file_to_display: FileDataWithProgress;
|
|
14
15
|
|
|
15
16
|
let files_with_progress: FileDataWithProgress[] = files.map((file) => {
|
|
16
17
|
return {
|
|
@@ -35,9 +36,12 @@
|
|
|
35
36
|
return (file.progress * 100) / (file.size || 0) || 0;
|
|
36
37
|
}
|
|
37
38
|
|
|
39
|
+
const EventSource_factory = getContext<(url: URL) => EventSource>(
|
|
40
|
+
"EventSource_factory"
|
|
41
|
+
);
|
|
38
42
|
onMount(() => {
|
|
39
|
-
event_source =
|
|
40
|
-
`${root}/upload_progress?upload_id=${upload_id}`
|
|
43
|
+
event_source = EventSource_factory(
|
|
44
|
+
new URL(`${root}/upload_progress?upload_id=${upload_id}`)
|
|
41
45
|
);
|
|
42
46
|
// Event listener for progress updates
|
|
43
47
|
event_source.onmessage = async function (event) {
|
|
@@ -68,6 +72,8 @@
|
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
$: calculateTotalProgress(files_with_progress);
|
|
75
|
+
|
|
76
|
+
$: file_to_display = current_file_upload || files_with_progress[0];
|
|
71
77
|
</script>
|
|
72
78
|
|
|
73
79
|
<div class="wrap" class:progress>
|
|
@@ -76,19 +82,19 @@
|
|
|
76
82
|
{files_with_progress.length > 1 ? "files" : "file"}...</span
|
|
77
83
|
>
|
|
78
84
|
|
|
79
|
-
{#if
|
|
85
|
+
{#if file_to_display}
|
|
80
86
|
<div class="file">
|
|
81
87
|
<span>
|
|
82
88
|
<div class="progress-bar">
|
|
83
89
|
<progress
|
|
84
90
|
style="visibility:hidden;height:0;width:0;"
|
|
85
|
-
value={getProgress(
|
|
86
|
-
max="100">{getProgress(
|
|
91
|
+
value={getProgress(file_to_display)}
|
|
92
|
+
max="100">{getProgress(file_to_display)}</progress
|
|
87
93
|
>
|
|
88
94
|
</div>
|
|
89
95
|
</span>
|
|
90
96
|
<span class="file-name">
|
|
91
|
-
{
|
|
97
|
+
{file_to_display.orig_name}
|
|
92
98
|
</span>
|
|
93
99
|
</div>
|
|
94
100
|
{/if}
|