Ensure dropped files are validated in MultimediaTextbox (#9904)

* add logic to validate dropped files

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/tough-ideas-wear.md

@@ -0,0 +1,6 @@
+---
+"@gradio/multimodaltextbox": patch
+"gradio": patch
+---
+
+fix:Ensure dropped files are validated in MultimediaTextbox

js/multimodaltextbox/Index.svelte

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

js/multimodaltextbox/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>
@@ -370,6 +395,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 {