@gradio/upload 0.5.8 → 0.6.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 +10 -0
- package/package.json +2 -2
- package/src/UploadProgress.svelte +13 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @gradio/upload
|
|
2
2
|
|
|
3
|
+
## 0.6.0
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#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)!
|
|
8
|
+
|
|
9
|
+
### Fixes
|
|
10
|
+
|
|
11
|
+
- [#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)!
|
|
12
|
+
|
|
3
13
|
## 0.5.8
|
|
4
14
|
|
|
5
15
|
### Features
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/upload",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.ts",
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
"license": "ISC",
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"@gradio/atoms": "^0.4.1",
|
|
11
|
+
"@gradio/upload": "^0.6.0",
|
|
11
12
|
"@gradio/client": "^0.10.0",
|
|
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,
|
|
@@ -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}
|