Refactor drag-and-drop functionality in app.py to improve file input handling by introducing a helper function for input selection.

app.py

@@ -201,19 +201,23 @@ with gr.Blocks(css=css) as demo:
                     var root = document.getElementById("input-image");
                     if (!root || root.dataset.dropBound === "1") return;
 
-                    var input = root.querySelector('input[type="file"]');
-                    if (!input) return;
-
                     function prevent(e) {
                       e.preventDefault();
                       e.stopPropagation();
                     }
 
+                    function findInput() {
+                      return root.querySelector('input[type="file"]') || root.querySelector("input");
+                    }
+
                     function onDrop(e) {
                       prevent(e);
                       var files = e.dataTransfer && e.dataTransfer.files;
                       if (!files || files.length === 0) return;
 
+                      var input = findInput();
+                      if (!input) return;
+
                       var dt = new DataTransfer();
                       dt.items.add(files[0]);
                       input.files = dt.files;

test.py

@@ -0,0 +1,83 @@
+import gradio as gr
+
+css = """
+#input-image {
+    min-height: 320px;
+}
+"""
+
+DROP_JS = """
+<script>
+(function () {
+  function bindDrop() {
+    var root = document.getElementById("input-image");
+    if (!root || root.dataset.dropBound === "1") return;
+
+    function prevent(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    function findInput() {
+      return root.querySelector('input[type="file"]') || root.querySelector("input");
+    }
+
+    function onDrop(e) {
+      prevent(e);
+      var files = e.dataTransfer && e.dataTransfer.files;
+      console.log("[drop] files:", files && files.length);
+      if (!files || files.length === 0) return;
+
+      var input = findInput();
+      if (!input) {
+        console.warn("[drop] file input not found");
+        return;
+      }
+
+      var dt = new DataTransfer();
+      dt.items.add(files[0]);
+      input.files = dt.files;
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    root.addEventListener("dragenter", prevent, true);
+    root.addEventListener("dragover", prevent, true);
+    root.addEventListener("drop", onDrop, true);
+    root.dataset.dropBound = "1";
+    console.log("[drop] bound");
+  }
+
+  var observer = new MutationObserver(function () {
+    bindDrop();
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  window.addEventListener("load", function () {
+    bindDrop();
+  });
+  setTimeout(bindDrop, 1000);
+})();
+</script>
+"""
+
+
+def on_change(image):
+    return "changed" if image is not None else "cleared"
+
+
+with gr.Blocks(css=css) as demo:
+    gr.Markdown("Drop replace test")
+    img = gr.Image(
+        label="Input Image",
+        show_label=False,
+        type="pil",
+        interactive=True,
+        elem_id="input-image",
+    )
+    status = gr.Textbox(label="Status", interactive=False)
+    img.change(on_change, inputs=img, outputs=status)
+    gr.HTML(DROP_JS)
+
+
+if __name__ == "__main__":
+    demo.launch()