@gradio/file 0.2.0-beta.5 → 0.2.0-beta.8

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.
Files changed (16) hide show
  1. package/CHANGELOG.md +73 -26
  2. package/{example/File.svelte → Example.svelte} +1 -1
  3. package/Index.svelte +110 -0
  4. package/README.md +39 -5
  5. package/package.json +11 -12
  6. package/{static → shared}/File.svelte +2 -2
  7. package/shared/FilePreview.svelte +5 -7
  8. package/{interactive → shared}/FileUpload.svelte +5 -4
  9. package/shared/utils.ts +2 -2
  10. package/example/index.ts +0 -1
  11. package/interactive/InteractiveFile.svelte +0 -148
  12. package/interactive/index.ts +0 -1
  13. package/shared/index.ts +0 -1
  14. package/static/StaticFile.svelte +0 -136
  15. package/static/index.ts +0 -1
  16. package/static/utils.ts +0 -33
package/CHANGELOG.md CHANGED
@@ -1,52 +1,99 @@
1
1
  # @gradio/file
2
2
 
3
- ## 0.2.0-beta.5
3
+ ## 0.2.0-beta.8
4
4
 
5
5
  ### Features
6
6
 
7
- - [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
7
+ - [#6143](https://github.com/gradio-app/gradio/pull/6143) [`e4f7b4b40`](https://github.com/gradio-app/gradio/commit/e4f7b4b409323b01aa01b39e15ce6139e29aa073) - fix circular dependency with client + upload. Thanks [@pngwn](https://github.com/pngwn)!
8
+ - [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
9
+ - [#6094](https://github.com/gradio-app/gradio/pull/6094) [`c476bd5a5`](https://github.com/gradio-app/gradio/commit/c476bd5a5b70836163b9c69bf4bfe068b17fbe13) - Image v4. Thanks [@pngwn](https://github.com/pngwn)!
10
+ - [#6149](https://github.com/gradio-app/gradio/pull/6149) [`90318b1dd`](https://github.com/gradio-app/gradio/commit/90318b1dd118ae08a695a50e7c556226234ab6dc) - swap `mode` on the frontned to `interactive` to match the backend. Thanks [@pngwn](https://github.com/pngwn)!
11
+ - [#6135](https://github.com/gradio-app/gradio/pull/6135) [`bce37ac74`](https://github.com/gradio-app/gradio/commit/bce37ac744496537e71546d2bb889bf248dcf5d3) - Fix selectable prop in the backend. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
8
12
 
9
- ## 0.2.0-beta.4
13
+ ## 0.2.0-beta.7
14
+
15
+ ### Features
16
+
17
+ - [#6016](https://github.com/gradio-app/gradio/pull/6016) [`83e947676`](https://github.com/gradio-app/gradio/commit/83e947676d327ca2ab6ae2a2d710c78961c771a0) - Format js in v4 branch. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
18
+ - [#6044](https://github.com/gradio-app/gradio/pull/6044) [`9053c95a1`](https://github.com/gradio-app/gradio/commit/9053c95a10de12aef572018ee37c71106d2da675) - Simplify File Component. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
19
+
20
+ ### Fixes
21
+
22
+ - [#6046](https://github.com/gradio-app/gradio/pull/6046) [`dbb7de5e0`](https://github.com/gradio-app/gradio/commit/dbb7de5e02c53fee05889d696d764d212cb96c74) - fix tests. Thanks [@pngwn](https://github.com/pngwn)!
23
+
24
+ ## 0.2.0-beta.6
25
+
26
+ ### Features
27
+
28
+ - [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files. Thanks [@pngwn](https://github.com/pngwn)!
29
+ - [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
30
+
31
+ ## 0.2.2
10
32
 
11
33
  ### Patch Changes
12
34
 
13
- - Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
14
- - @gradio/utils@0.2.0-beta.3
15
- - @gradio/atoms@0.2.0-beta.3
16
- - @gradio/statustracker@0.3.0-beta.4
17
- - @gradio/upload@0.3.0-beta.3
35
+ - Updated dependencies [[`4e62b8493`](https://github.com/gradio-app/gradio/commit/4e62b8493dfce50bafafe49f1a5deb929d822103), [`e70805d54`](https://github.com/gradio-app/gradio/commit/e70805d54cc792452545f5d8eccc1aa0212a4695)]:
36
+ - @gradio/client@0.5.2
37
+ - @gradio/atoms@0.2.0
38
+ - @gradio/statustracker@0.2.3
39
+ - @gradio/upload@0.3.3
18
40
 
19
- ## 0.2.0-beta.3
41
+ ## 0.2.1
20
42
 
21
43
  ### Patch Changes
22
44
 
23
- - Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
24
- - @gradio/utils@0.2.0-beta.2
25
- - @gradio/atoms@0.2.0-beta.2
26
- - @gradio/statustracker@0.3.0-beta.3
27
- - @gradio/upload@0.3.0-beta.2
45
+ - Updated dependencies [[`796145e2c`](https://github.com/gradio-app/gradio/commit/796145e2c48c4087bec17f8ec0be4ceee47170cb)]:
46
+ - @gradio/client@0.5.1
28
47
 
29
- ## 0.2.0-beta.2
48
+ ## 0.2.0
30
49
 
31
- ### Features
50
+ ### Highlights
51
+
52
+ #### new `FileExplorer` component ([#5672](https://github.com/gradio-app/gradio/pull/5672) [`e4a307ed6`](https://github.com/gradio-app/gradio/commit/e4a307ed6cde3bbdf4ff2f17655739addeec941e))
53
+
54
+ Thanks to a new capability that allows components to communicate directly with the server _without_ passing data via the value, we have created a new `FileExplorer` component.
32
55
 
33
- - [#5620](https://github.com/gradio-app/gradio/pull/5620) [`c4c25ecdf`](https://github.com/gradio-app/gradio/commit/c4c25ecdf8c2fab5e3c41b519564e3b6a9ebfce3) - fix build and broken imports. Thanks [@pngwn](https://github.com/pngwn)!
56
+ This component allows you to populate the explorer by passing a glob, but only provides the selected file(s) in your prediction function.
34
57
 
35
- ## 0.2.0-beta.1
58
+ Users can then navigate the virtual filesystem and select files which will be accessible in your predict function. This component will allow developers to build more complex spaces, with more flexible input options.
59
+
60
+ ![output](https://github.com/pngwn/MDsveX/assets/12937446/ef108f0b-0e84-4292-9984-9dc66b3e144d)
61
+
62
+ For more information check the [`FileExplorer` documentation](https://gradio.app/docs/fileexplorer).
63
+
64
+ Thanks [@aliabid94](https://github.com/aliabid94)!
65
+
66
+ ## 0.1.6
36
67
 
37
68
  ### Patch Changes
38
69
 
39
- - Updated dependencies []:
40
- - @gradio/utils@0.2.0-beta.1
41
- - @gradio/atoms@0.2.0-beta.1
42
- - @gradio/statustracker@0.3.0-beta.1
43
- - @gradio/upload@0.3.0-beta.1
70
+ - Updated dependencies [[`6e56a0d9b`](https://github.com/gradio-app/gradio/commit/6e56a0d9b0c863e76c69e1183d9d40196922b4cd)]:
71
+ - @gradio/client@0.4.2
44
72
 
45
- ## 0.2.0-beta.0
73
+ ## 0.1.5
46
74
 
47
- ### Features
75
+ ### Patch Changes
76
+
77
+ - Updated dependencies [[`8f0fed857`](https://github.com/gradio-app/gradio/commit/8f0fed857d156830626eb48b469d54d211a582d2)]:
78
+ - @gradio/icons@0.2.0
79
+ - @gradio/atoms@0.1.3
80
+ - @gradio/statustracker@0.2.1
81
+ - @gradio/upload@0.3.1
82
+
83
+ ## 0.1.4
84
+
85
+ ### Patch Changes
86
+
87
+ - Updated dependencies [[`78e7cf516`](https://github.com/gradio-app/gradio/commit/78e7cf5163e8d205e8999428fce4c02dbdece25f)]:
88
+ - @gradio/client@0.4.1
89
+
90
+ ## 0.1.3
91
+
92
+ ### Patch Changes
48
93
 
49
- - [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
94
+ - Updated dependencies [[`c57f1b75e`](https://github.com/gradio-app/gradio/commit/c57f1b75e272c76b0af4d6bd0c7f44743ff34f26), [`40de3d217`](https://github.com/gradio-app/gradio/commit/40de3d2178b61ebe424b6f6228f94c0c6f679bea), [`ea0e00b20`](https://github.com/gradio-app/gradio/commit/ea0e00b207b4b90a10e9d054c4202d4e705a29ba), [`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423)]:
95
+ - @gradio/client@0.4.0
96
+ - @gradio/upload@0.3.0
50
97
 
51
98
  ## 0.1.2
52
99
 
package/{example/File.svelte → Example.svelte} RENAMED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import type { FileData } from "@gradio/upload";
2
+ import type { FileData } from "@gradio/client";
3
3
 
4
4
  export let value: FileData;
5
5
  export let type: "gallery" | "table";
package/Index.svelte ADDED
@@ -0,0 +1,110 @@
1
+ <svelte:options accessors={true} />
2
+
3
+ <script context="module" lang="ts">
4
+ export { default as FilePreview } from "./shared/FilePreview.svelte";
5
+ export { default as BaseFileUpload } from "./shared/FileUpload.svelte";
6
+ export { default as BaseFile } from "./shared/File.svelte";
7
+ export { default as BaseExample } from "./Example.svelte";
8
+ </script>
9
+
10
+ <script lang="ts">
11
+ import type { Gradio, SelectData } from "@gradio/utils";
12
+ import File from "./shared/File.svelte";
13
+ import FileUpload from "./shared/FileUpload.svelte";
14
+ import { normalise_file, type FileData } from "@gradio/client";
15
+ import { Block, UploadText } from "@gradio/atoms";
16
+
17
+ import { StatusTracker } from "@gradio/statustracker";
18
+ import type { LoadingStatus } from "@gradio/statustracker";
19
+
20
+ export let elem_id = "";
21
+ export let elem_classes: string[] = [];
22
+ export let visible = true;
23
+ export let value: null | FileData | FileData[];
24
+
25
+ export let interactive: boolean;
26
+ export let root: string;
27
+ export let label: string;
28
+ export let show_label: boolean;
29
+ export let height: number | undefined = undefined;
30
+
31
+ export let root_url: null | string;
32
+ export let _selectable = false;
33
+ export let loading_status: LoadingStatus;
34
+ export let container = true;
35
+ export let scale: number | null = null;
36
+ export let min_width: number | undefined = undefined;
37
+ export let gradio: Gradio<{
38
+ change: never;
39
+ error: string;
40
+ upload: never;
41
+ clear: never;
42
+ select: SelectData;
43
+ }>;
44
+ export let file_count: string;
45
+ export let file_types: string[] = ["file"];
46
+ $: _value = normalise_file(value, root, root_url);
47
+
48
+ let old_value = _value;
49
+ $: if (JSON.stringify(old_value) !== JSON.stringify(_value)) {
50
+ gradio.dispatch("change");
51
+ old_value = _value;
52
+ }
53
+
54
+ let dragging = false;
55
+ let pending_upload = false;
56
+ </script>
57
+
58
+ <Block
59
+ {visible}
60
+ variant={value === null ? "dashed" : "solid"}
61
+ border_mode={dragging ? "focus" : "base"}
62
+ padding={false}
63
+ {elem_id}
64
+ {elem_classes}
65
+ {container}
66
+ {scale}
67
+ {min_width}
68
+ allow_overflow={false}
69
+ >
70
+ <StatusTracker
71
+ autoscroll={gradio.autoscroll}
72
+ i18n={gradio.i18n}
73
+ {...loading_status}
74
+ status={pending_upload
75
+ ? "generating"
76
+ : loading_status?.status || "complete"}
77
+ />
78
+ {#if !interactive}
79
+ <File
80
+ on:select={({ detail }) => gradio.dispatch("select", detail)}
81
+ selectable={_selectable}
82
+ value={_value}
83
+ {label}
84
+ {show_label}
85
+ {height}
86
+ i18n={gradio.i18n}
87
+ />
88
+ {:else}
89
+ <FileUpload
90
+ {label}
91
+ {show_label}
92
+ value={_value}
93
+ {file_count}
94
+ {file_types}
95
+ selectable={_selectable}
96
+ {root}
97
+ {height}
98
+ on:change={({ detail }) => {
99
+ value = detail;
100
+ }}
101
+ on:drag={({ detail }) => (dragging = detail)}
102
+ on:clear={() => gradio.dispatch("clear")}
103
+ on:select={({ detail }) => gradio.dispatch("select", detail)}
104
+ on:upload={() => gradio.dispatch("upload")}
105
+ i18n={gradio.i18n}
106
+ >
107
+ <UploadText i18n={gradio.i18n} type="file" />
108
+ </FileUpload>
109
+ {/if}
110
+ </Block>
package/README.md CHANGED
@@ -1,11 +1,45 @@
1
- # `@gradio/button`
1
+ # `@gradio/file`
2
2
 
3
3
  ```html
4
4
  <script>
5
- import { Button } from "@gradio/button";
5
+ import { BaseFile, BaseFileUpload, FilePreview, BaseExample } from "@gradio/file";
6
6
  </script>
7
+ ```
8
+
9
+ BaseFile
10
+ ```javascript
11
+ export let value: FileData | FileData[] | null = null;
12
+ export let label: string;
13
+ export let show_label = true;
14
+ export let selectable = false;
15
+ export let height: number | undefined = undefined;
16
+ export let i18n: I18nFormatter;
17
+ ```
7
18
 
8
- <button type="primary|secondary" href="string" on:click="{e.detail === href}">
9
- content
10
- </button>
19
+ BaseFileUpload
20
+ ```javascript
21
+ export let value: null | FileData | FileData[];
22
+ export let label: string;
23
+ export let show_label = true;
24
+ export let file_count = "single";
25
+ export let file_types: string[] | null = null;
26
+ export let selectable = false;
27
+ export let root: string;
28
+ export let height: number | undefined = undefined;
29
+ export let i18n: I18nFormatter;
11
30
  ```
31
+
32
+ FilePreview
33
+ ```javascript
34
+ export let value: FileData | FileData[];
35
+ export let selectable = false;
36
+ export let height: number | undefined = undefined;
37
+ export let i18n: I18nFormatter;
38
+ ```
39
+
40
+ BaseExample
41
+ ```javascript
42
+ export let value: FileData;
43
+ export let type: "gallery" | "table";
44
+ export let selected = false;
45
+ ```
package/package.json CHANGED
@@ -1,25 +1,24 @@
1
1
  {
2
2
  "name": "@gradio/file",
3
- "version": "0.2.0-beta.5",
3
+ "version": "0.2.0-beta.8",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
- "main": "./index.svelte",
7
6
  "author": "",
8
7
  "license": "ISC",
9
8
  "private": false,
10
9
  "dependencies": {
11
- "@gradio/atoms": "^0.2.0-beta.3",
12
- "@gradio/client": "^0.3.1",
13
- "@gradio/icons": "^0.2.0-beta.0",
14
- "@gradio/statustracker": "^0.3.0-beta.5",
15
- "@gradio/upload": "^0.3.0-beta.3",
16
- "@gradio/utils": "^0.2.0-beta.3"
10
+ "@gradio/atoms": "^0.2.0-beta.6",
11
+ "@gradio/client": "^0.7.0-beta.1",
12
+ "@gradio/icons": "^0.2.0-beta.3",
13
+ "@gradio/statustracker": "^0.3.0-beta.8",
14
+ "@gradio/upload": "^0.3.0-beta.6",
15
+ "@gradio/utils": "^0.2.0-beta.6"
17
16
  },
17
+ "main": "./Index.svelte",
18
18
  "main_changeset": true,
19
19
  "exports": {
20
- "./package.json": "./package.json",
21
- "./interactive": "./interactive/index.ts",
22
- "./static": "./static/index.ts",
23
- "./example": "./example/index.ts"
20
+ ".": "./Index.svelte",
21
+ "./example": "./Example.svelte",
22
+ "./package.json": "./package.json"
24
23
  }
25
24
  }
package/{static → shared}/File.svelte RENAMED
@@ -1,8 +1,8 @@
1
1
  <script lang="ts">
2
- import type { FileData } from "@gradio/upload";
2
+ import type { FileData } from "@gradio/client";
3
3
  import { BlockLabel, Empty } from "@gradio/atoms";
4
4
  import { File } from "@gradio/icons";
5
- import { FilePreview } from "../shared";
5
+ import FilePreview from "./FilePreview.svelte";
6
6
  import type { I18nFormatter } from "js/utils/src";
7
7
 
8
8
  export let value: FileData | FileData[] | null = null;
package/shared/FilePreview.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import type { FileData } from "@gradio/upload";
2
+ import type { FileData } from "@gradio/client";
3
3
  import { display_file_name, display_file_size } from "./utils";
4
4
  import { createEventDispatcher } from "svelte";
5
5
  import type { I18nFormatter, SelectData } from "@gradio/utils";
@@ -25,7 +25,7 @@
25
25
  class:selectable
26
26
  on:click={() =>
27
27
  dispatch("select", {
28
- value: file.orig_name || file.name,
28
+ value: file.orig_name,
29
29
  index: i
30
30
  })}
31
31
  >
@@ -34,13 +34,11 @@
34
34
  </td>
35
35
 
36
36
  <td class="download">
37
- {#if file.data}
37
+ {#if file.url}
38
38
  <a
39
- href={file.data}
39
+ href={file.url}
40
40
  target="_blank"
41
- download={window.__is_colab__
42
- ? null
43
- : file.orig_name || file.name}
41
+ download={window.__is_colab__ ? null : file.orig_name}
44
42
  >
45
43
  {@html display_file_size(file)}&nbsp;&#8675;
46
44
  </a>
package/{interactive → shared}/FileUpload.svelte RENAMED
@@ -1,11 +1,11 @@
1
1
  <script lang="ts">
2
2
  import { createEventDispatcher, tick } from "svelte";
3
3
  import { Upload, ModifyUpload } from "@gradio/upload";
4
- import type { FileData } from "@gradio/upload";
4
+ import type { FileData } from "@gradio/client";
5
5
  import { BlockLabel } from "@gradio/atoms";
6
6
  import { File } from "@gradio/icons";
7
7
 
8
- import { FilePreview } from "../shared";
8
+ import FilePreview from "./FilePreview.svelte";
9
9
  import type { I18nFormatter } from "js/utils/src";
10
10
 
11
11
  export let value: null | FileData | FileData[];
@@ -28,9 +28,9 @@
28
28
  dispatch("upload", detail);
29
29
  }
30
30
 
31
- function handle_clear({ detail }: CustomEvent<null>): void {
31
+ function handle_clear(): void {
32
32
  value = null;
33
- dispatch("change", value);
33
+ dispatch("change", null);
34
34
  dispatch("clear");
35
35
  }
36
36
 
@@ -39,6 +39,7 @@
39
39
  clear: undefined;
40
40
  drag: boolean;
41
41
  upload: FileData[] | FileData;
42
+ load: FileData[] | FileData;
42
43
  error: string;
43
44
  }>();
44
45
 
package/shared/utils.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FileData } from "@gradio/upload";
1
+ import type { FileData } from "@gradio/client";
2
2
 
3
3
  export const prettyBytes = (bytes: number): string => {
4
4
  let units = ["B", "KB", "MB", "GB", "PB"];
@@ -13,7 +13,7 @@ export const prettyBytes = (bytes: number): string => {
13
13
 
14
14
  export const display_file_name = (value: FileData): string => {
15
15
  var str: string;
16
- str = value.orig_name || value.name;
16
+ str = value.orig_name;
17
17
  const max_length = 30;
18
18
 
19
19
  if (str.length > max_length) {
package/example/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./File.svelte";
package/interactive/InteractiveFile.svelte DELETED
@@ -1,148 +0,0 @@
1
- <svelte:options accessors={true} />
2
-
3
- <script lang="ts">
4
- import type { Gradio, SelectData } from "@gradio/utils";
5
- import { getContext } from "svelte";
6
- import FileUpload from "./FileUpload.svelte";
7
- import { blobToBase64 } from "@gradio/upload";
8
- import type { FileData } from "@gradio/upload";
9
- import { normalise_file } from "@gradio/upload";
10
- import { Block } from "@gradio/atoms";
11
- import { UploadText } from "@gradio/atoms";
12
- import { upload_files as default_upload_files } from "@gradio/client";
13
-
14
- import { StatusTracker } from "@gradio/statustracker";
15
- import type { LoadingStatus } from "@gradio/statustracker";
16
-
17
- import type { S } from "@storybook/theming/dist/create-c2b2ce6d";
18
-
19
- export let elem_id = "";
20
- export let elem_classes: string[] = [];
21
- export let visible = true;
22
- export let value: null | FileData | FileData[];
23
- let old_value: null | FileData | FileData[];
24
-
25
- export let mode: "static" | "interactive";
26
- export let root: string;
27
- export let label: string;
28
- export let show_label: boolean;
29
- export let file_count: string;
30
- export let file_types: string[] = ["file"];
31
- export let root_url: null | string;
32
- export let selectable = false;
33
- export let loading_status: LoadingStatus;
34
- export let container = true;
35
- export let scale: number | null = null;
36
- export let min_width: number | undefined = undefined;
37
- export let height: number | undefined = undefined;
38
- export let gradio: Gradio<{
39
- change: never;
40
- error: string;
41
- upload: never;
42
- clear: never;
43
- select: SelectData;
44
- }>;
45
-
46
- const upload_files =
47
- getContext<typeof default_upload_files>("upload_files") ??
48
- default_upload_files;
49
-
50
- $: _value = normalise_file(value, root, root_url);
51
-
52
- let dragging = false;
53
- let pending_upload = false;
54
-
55
- $: {
56
- if (JSON.stringify(_value) !== JSON.stringify(old_value)) {
57
- old_value = _value;
58
- if (_value === null) {
59
- gradio.dispatch("change");
60
- pending_upload = false;
61
- } else if (
62
- !(Array.isArray(_value) ? _value : [_value]).every(
63
- (file_data) => file_data.blob
64
- )
65
- ) {
66
- pending_upload = false;
67
- gradio.dispatch("change");
68
- } else if (mode === "interactive") {
69
- let files = (Array.isArray(_value) ? _value : [_value]).map(
70
- (file_data) => file_data.blob!
71
- );
72
- let upload_value = _value;
73
- pending_upload = true;
74
- upload_files(root, files).then((response) => {
75
- if (upload_value !== _value) {
76
- // value has changed since upload started
77
- return;
78
- }
79
-
80
- pending_upload = false;
81
- if (response.error) {
82
- (Array.isArray(_value) ? _value : [_value]).forEach(
83
- async (file_data, i) => {
84
- file_data.data = await blobToBase64(file_data.blob!);
85
- file_data.blob = undefined;
86
- }
87
- );
88
- } else {
89
- (Array.isArray(_value) ? _value : [_value]).forEach(
90
- (file_data, i) => {
91
- if (response.files) {
92
- file_data.orig_name = file_data.name;
93
- file_data.name = response.files[i];
94
- file_data.is_file = true;
95
- file_data.blob = undefined;
96
- }
97
- }
98
- );
99
- old_value = _value = normalise_file(value, root, root_url);
100
- }
101
- gradio.dispatch("change");
102
- gradio.dispatch("upload");
103
- });
104
- }
105
- }
106
- }
107
- </script>
108
-
109
- <Block
110
- {visible}
111
- variant={value === null ? "dashed" : "solid"}
112
- border_mode={dragging ? "focus" : "base"}
113
- padding={false}
114
- {elem_id}
115
- {elem_classes}
116
- {container}
117
- {scale}
118
- {min_width}
119
- {height}
120
- allow_overflow={false}
121
- >
122
- <StatusTracker
123
- autoscroll={gradio.autoscroll}
124
- i18n={gradio.i18n}
125
- {...loading_status}
126
- status={pending_upload
127
- ? "generating"
128
- : loading_status?.status || "complete"}
129
- />
130
-
131
- <FileUpload
132
- {label}
133
- {show_label}
134
- value={_value}
135
- {file_count}
136
- {file_types}
137
- {selectable}
138
- {root}
139
- {height}
140
- on:change={({ detail }) => (value = detail)}
141
- on:drag={({ detail }) => (dragging = detail)}
142
- on:clear={() => gradio.dispatch("clear")}
143
- on:select={({ detail }) => gradio.dispatch("select", detail)}
144
- i18n={gradio.i18n}
145
- >
146
- <UploadText i18n={gradio.i18n} type="file" />
147
- </FileUpload>
148
- </Block>
package/interactive/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./InteractiveFile.svelte";
package/shared/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default as FilePreview } from "./FilePreview.svelte";
package/static/StaticFile.svelte DELETED
@@ -1,136 +0,0 @@
1
- <svelte:options accessors={true} />
2
-
3
- <script lang="ts">
4
- import type { Gradio, SelectData } from "@gradio/utils";
5
- import { getContext } from "svelte";
6
- import File from "./File.svelte";
7
- import { blobToBase64 } from "@gradio/upload";
8
- import type { FileData } from "@gradio/upload";
9
- import { normalise_file } from "@gradio/upload";
10
- import { Block } from "@gradio/atoms";
11
-
12
- import { upload_files as default_upload_files } from "@gradio/client";
13
-
14
- import { StatusTracker } from "@gradio/statustracker";
15
- import type { LoadingStatus } from "@gradio/statustracker";
16
-
17
- export let elem_id = "";
18
- export let elem_classes: string[] = [];
19
- export let visible = true;
20
- export let value: null | FileData | FileData[];
21
- let old_value: null | FileData | FileData[];
22
-
23
- export let mode: "static" | "interactive";
24
- export let root: string;
25
- export let label: string;
26
- export let show_label: boolean;
27
- export let height: number | undefined = undefined;
28
-
29
- export let root_url: null | string;
30
- export let selectable = false;
31
- export let loading_status: LoadingStatus;
32
- export let container = true;
33
- export let scale: number | null = null;
34
- export let min_width: number | undefined = undefined;
35
- export let gradio: Gradio<{
36
- change: never;
37
- error: string;
38
- upload: never;
39
- clear: never;
40
- select: SelectData;
41
- }>;
42
-
43
- const upload_files =
44
- getContext<typeof default_upload_files>("upload_files") ??
45
- default_upload_files;
46
-
47
- $: _value = normalise_file(value, root, root_url);
48
-
49
- let dragging = false;
50
- let pending_upload = false;
51
-
52
- $: {
53
- if (JSON.stringify(_value) !== JSON.stringify(old_value)) {
54
- old_value = _value;
55
- if (_value === null) {
56
- gradio.dispatch("change");
57
- pending_upload = false;
58
- } else if (
59
- !(Array.isArray(_value) ? _value : [_value]).every(
60
- (file_data) => file_data.blob
61
- )
62
- ) {
63
- pending_upload = false;
64
- gradio.dispatch("change");
65
- } else if (mode === "interactive") {
66
- let files = (Array.isArray(_value) ? _value : [_value]).map(
67
- (file_data) => file_data.blob!
68
- );
69
- let upload_value = _value;
70
- pending_upload = true;
71
- upload_files(root, files).then((response) => {
72
- if (upload_value !== _value) {
73
- // value has changed since upload started
74
- return;
75
- }
76
-
77
- pending_upload = false;
78
- if (response.error) {
79
- (Array.isArray(_value) ? _value : [_value]).forEach(
80
- async (file_data, i) => {
81
- file_data.data = await blobToBase64(file_data.blob!);
82
- file_data.blob = undefined;
83
- }
84
- );
85
- } else {
86
- (Array.isArray(_value) ? _value : [_value]).forEach(
87
- (file_data, i) => {
88
- if (response.files) {
89
- file_data.orig_name = file_data.name;
90
- file_data.name = response.files[i];
91
- file_data.is_file = true;
92
- file_data.blob = undefined;
93
- }
94
- }
95
- );
96
- old_value = _value = normalise_file(value, root, root_url);
97
- }
98
- gradio.dispatch("change");
99
- gradio.dispatch("upload");
100
- });
101
- }
102
- }
103
- }
104
- </script>
105
-
106
- <Block
107
- {visible}
108
- variant={value === null ? "dashed" : "solid"}
109
- border_mode={dragging ? "focus" : "base"}
110
- padding={false}
111
- {elem_id}
112
- {elem_classes}
113
- {container}
114
- {scale}
115
- {min_width}
116
- allow_overflow={false}
117
- >
118
- <StatusTracker
119
- autoscroll={gradio.autoscroll}
120
- i18n={gradio.i18n}
121
- {...loading_status}
122
- status={pending_upload
123
- ? "generating"
124
- : loading_status?.status || "complete"}
125
- />
126
-
127
- <File
128
- on:select={({ detail }) => gradio.dispatch("select", detail)}
129
- {selectable}
130
- value={_value}
131
- {label}
132
- {show_label}
133
- {height}
134
- i18n={gradio.i18n}
135
- />
136
- </Block>
package/static/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./StaticFile.svelte";
package/static/utils.ts DELETED
@@ -1,33 +0,0 @@
1
- import type { FileData } from "@gradio/upload";
2
-
3
- export const prettyBytes = (bytes: number): string => {
4
- let units = ["B", "KB", "MB", "GB", "PB"];
5
- let i = 0;
6
- while (bytes > 1024) {
7
- bytes /= 1024;
8
- i++;
9
- }
10
- let unit = units[i];
11
- return bytes.toFixed(1) + " " + unit;
12
- };
13
-
14
- export const display_file_name = (value: FileData): string => {
15
- var str: string;
16
- str = value.orig_name || value.name;
17
- if (str.length > 30) {
18
- return `${str.substr(0, 30)}...`;
19
- }
20
- return str;
21
- };
22
-
23
- export const display_file_size = (value: FileData | FileData[]): string => {
24
- var total_size = 0;
25
- if (Array.isArray(value)) {
26
- for (var file of value) {
27
- if (file.size !== undefined) total_size += file.size;
28
- }
29
- } else {
30
- total_size = value.size || 0;
31
- }
32
- return prettyBytes(total_size);
33
- };