@gradio/multimodaltextbox 0.7.4 → 0.7.6

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @gradio/multimodaltextbox
 
+## 0.7.6
+
+### Fixes
+
+- [#9946](https://github.com/gradio-app/gradio/pull/9946) [`a966e9f`](https://github.com/gradio-app/gradio/commit/a966e9f753af25eb9d813dfdbce39be6f3014d82) - Hide upload button after upload when `file_count="single"`.  Thanks @abidlabs!
+- [#9904](https://github.com/gradio-app/gradio/pull/9904) [`f523c91`](https://github.com/gradio-app/gradio/commit/f523c915d3732859ff4a8019a82cb597b5208ae2) - Ensure dropped files are validated in MultimediaTextbox.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/video@0.11.8
+- @gradio/atoms@0.11.1
+- @gradio/client@1.8.0
+- @gradio/utils@0.8.0
+- @gradio/upload@0.14.1
+- @gradio/statustracker@0.9.5
+- @gradio/image@0.16.8
+
+## 0.7.5
+
+### Dependency updates
+
+- @gradio/video@0.11.7
+- @gradio/statustracker@0.9.4
+- @gradio/atoms@0.11.0
+- @gradio/upload@0.14.0
+- @gradio/image@0.16.7
+
 ## 0.7.4
 
 ### Fixes

package/Index.svelte

@@ -63,7 +63,7 @@
 	{scale}
 	{min_width}
 	allow_overflow={false}
-	padding={container}
+	padding={false}
 	border_mode={dragging ? "focus" : "base"}
 >
 	{#if loading_status}

package/MultimodalTextbox.stories.svelte

@@ -73,3 +73,17 @@
 />
 <Story name="Right aligned textbox" args={{ text_align: "right" }} />
 <Story name="RTL textbox" args={{ rtl: true }} />
+<Story
+	name="Single file upload"
+	args={{
+		file_count: "single",
+		value: {
+			text: "sample text",
+			files: [
+				{
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
+				}
+			]
+		}
+	}}
+/>

package/dist/Index.svelte

@@ -46,7 +46,7 @@ let dragging;
 	{scale}
 	{min_width}
 	allow_overflow={false}
-	padding={container}
+	padding={false}
 	border_mode={dragging ? "focus" : "base"}
 >
 	{#if loading_status}

package/dist/shared/MultimodalTextbox.svelte

@@ -184,7 +184,29 @@ function handle_drop(event) {
   event.preventDefault();
   dragging = false;
   if (event.dataTransfer && event.dataTransfer.files) {
-    upload_component.load_files(Array.from(event.dataTransfer.files));
+    const files = Array.from(event.dataTransfer.files);
+    if (file_types) {
+      const valid_files = files.filter((file) => {
+        return file_types.some((type) => {
+          if (type.startsWith(".")) {
+            return file.name.toLowerCase().endsWith(type.toLowerCase());
+          }
+          return file.type.match(new RegExp(type.replace("*", ".*")));
+        });
+      });
+      const invalid_files = files.length - valid_files.length;
+      if (invalid_files > 0) {
+        dispatch(
+          "error",
+          `${invalid_files} file(s) were rejected. Accepted formats: ${file_types.join(", ")}`
+        );
+      }
+      if (valid_files.length > 0) {
+        upload_component.load_files(valid_files);
+      }
+    } else {
+      upload_component.load_files(files);
+    }
   }
 }
 </script>
@@ -245,28 +267,30 @@ function handle_drop(event) {
 			</div>
 		{/if}
 		<div class="input-container">
-			<Upload
-				bind:this={upload_component}
-				on:load={handle_upload}
-				{file_count}
-				filetype={file_types}
-				{root}
-				{max_file_size}
-				bind:dragging
-				bind:uploading
-				show_progress={false}
-				disable_click={true}
-				bind:hidden_upload
-				on:error
-				hidden={true}
-				{upload}
-				{stream_handler}
-			></Upload>
-			<button
-				data-testid="upload-button"
-				class="upload-button"
-				on:click={handle_upload_click}><Paperclip /></button
-			>
+			{#if !disabled && !(file_count === "single" && value.files.length > 0)}
+				<Upload
+					bind:this={upload_component}
+					on:load={handle_upload}
+					{file_count}
+					filetype={file_types}
+					{root}
+					{max_file_size}
+					bind:dragging
+					bind:uploading
+					show_progress={false}
+					disable_click={true}
+					bind:hidden_upload
+					on:error
+					hidden={true}
+					{upload}
+					{stream_handler}
+				></Upload>
+				<button
+					data-testid="upload-button"
+					class="upload-button"
+					on:click={handle_upload_click}><Paperclip /></button
+				>
+			{/if}
 			<textarea
 				data-testid="textbox"
 				use:text_area_resize={{
@@ -325,6 +349,13 @@ function handle_drop(event) {
 	.full-container {
 		width: 100%;
 		position: relative;
+		padding: var(--block-padding);
+		border: 1px solid transparent;
+	}
+
+	.full-container.dragging {
+		border: 1px solid var(--color-accent);
+		border-radius: calc(var(--radius-sm) - 1px);
 	}
 
 	.full-container.dragging::after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/multimodaltextbox",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -22,14 +22,14 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.10.1",
+    "@gradio/atoms": "^0.11.1",
+    "@gradio/statustracker": "^0.9.5",
     "@gradio/icons": "^0.8.1",
-    "@gradio/statustracker": "^0.9.3",
-    "@gradio/utils": "^0.7.0",
-    "@gradio/upload": "^0.13.5",
-    "@gradio/image": "^0.16.6",
-    "@gradio/client": "^1.7.1",
-    "@gradio/video": "^0.11.6"
+    "@gradio/utils": "^0.8.0",
+    "@gradio/upload": "^0.14.1",
+    "@gradio/video": "^0.11.8",
+    "@gradio/client": "^1.8.0",
+    "@gradio/image": "^0.16.8"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/MultimodalTextbox.svelte

@@ -229,7 +229,32 @@
 		event.preventDefault();
 		dragging = false;
 		if (event.dataTransfer && event.dataTransfer.files) {
-			upload_component.load_files(Array.from(event.dataTransfer.files));
+			const files = Array.from(event.dataTransfer.files);
+
+			if (file_types) {
+				const valid_files = files.filter((file) => {
+					return file_types.some((type) => {
+						if (type.startsWith(".")) {
+							return file.name.toLowerCase().endsWith(type.toLowerCase());
+						}
+						return file.type.match(new RegExp(type.replace("*", ".*")));
+					});
+				});
+
+				const invalid_files = files.length - valid_files.length;
+				if (invalid_files > 0) {
+					dispatch(
+						"error",
+						`${invalid_files} file(s) were rejected. Accepted formats: ${file_types.join(", ")}`
+					);
+				}
+
+				if (valid_files.length > 0) {
+					upload_component.load_files(valid_files);
+				}
+			} else {
+				upload_component.load_files(files);
+			}
 		}
 	}
 </script>
@@ -290,28 +315,30 @@
 			</div>
 		{/if}
 		<div class="input-container">
-			<Upload
-				bind:this={upload_component}
-				on:load={handle_upload}
-				{file_count}
-				filetype={file_types}
-				{root}
-				{max_file_size}
-				bind:dragging
-				bind:uploading
-				show_progress={false}
-				disable_click={true}
-				bind:hidden_upload
-				on:error
-				hidden={true}
-				{upload}
-				{stream_handler}
-			></Upload>
-			<button
-				data-testid="upload-button"
-				class="upload-button"
-				on:click={handle_upload_click}><Paperclip /></button
-			>
+			{#if !disabled && !(file_count === "single" && value.files.length > 0)}
+				<Upload
+					bind:this={upload_component}
+					on:load={handle_upload}
+					{file_count}
+					filetype={file_types}
+					{root}
+					{max_file_size}
+					bind:dragging
+					bind:uploading
+					show_progress={false}
+					disable_click={true}
+					bind:hidden_upload
+					on:error
+					hidden={true}
+					{upload}
+					{stream_handler}
+				></Upload>
+				<button
+					data-testid="upload-button"
+					class="upload-button"
+					on:click={handle_upload_click}><Paperclip /></button
+				>
+			{/if}
 			<textarea
 				data-testid="textbox"
 				use:text_area_resize={{
@@ -370,6 +397,13 @@
 	.full-container {
 		width: 100%;
 		position: relative;
+		padding: var(--block-padding);
+		border: 1px solid transparent;
+	}
+
+	.full-container.dragging {
+		border: 1px solid var(--color-accent);
+		border-radius: calc(var(--radius-sm) - 1px);
 	}
 
 	.full-container.dragging::after {