Download image client-side

javascript/dragdrop.js

@@ -56,10 +56,6 @@ function eventHasFiles(e) {
     return false;
 }
 
-function getEventUrl(e) {
-    return e.dataTransfer?.getData('text/uri-list') || e.dataTransfer?.getData('text/plain');
-}
-
 function dragDropTargetIsPrompt(target) {
     if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0) return true;
     if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0) return true;
@@ -78,9 +74,9 @@ window.document.addEventListener('dragover', e => {
     e.dataTransfer.dropEffect = 'copy';
 });
 
-window.document.addEventListener('drop', e => {
+window.document.addEventListener('drop', async e => {
     const target = e.composedPath()[0];
-    const url = getEventUrl(e);
+    const url = e.dataTransfer.getData('text/uri-list') || e.dataTransfer.getData('text/plain');
     if (!eventHasFiles(e) && !url) return;
 
     if (dragDropTargetIsPrompt(target)) {
@@ -89,19 +85,19 @@ window.document.addEventListener('drop', e => {
 
         const isImg2img = get_tab_index('tabs') == 1;
         let prompt_image_target = isImg2img ? "img2img_prompt_image" : "txt2img_prompt_image";
-        let prompt_url_target = isImg2img ? "img2img_prompt_url" : "txt2img_prompt_url";
 
         const imgParent = gradioApp().getElementById(prompt_image_target);
-        const urlParent = gradioApp().getElementById(prompt_url_target);
         const files = e.dataTransfer.files;
         const fileInput = imgParent.querySelector('input[type="file"]');
-        const urlInput = urlParent.querySelector('textarea');
-        if (url && urlInput) {
-            urlInput.value = url;
-            urlInput.dispatchEvent(new Event('input'));
-        } else if (files && fileInput) {
+        if (eventHasFiles(e) && fileInput) {
             fileInput.files = files;
             fileInput.dispatchEvent(new Event('change'));
+        } else if (url) {
+            const request = await fetch(url);
+            const data = new DataTransfer();
+            data.items.add(new File([await request.blob()], 'image.png'));
+            fileInput.files = data.files;
+            fileInput.dispatchEvent(new Event('change'));
         }
     }
 

modules/images.py

@@ -772,31 +772,18 @@ Steps: {json_info["steps"]}, Sampler: {sampler}, CFG scale: {json_info["scale"]}
 def image_data(data):
     import gradio as gr
 
-    if not data:
-        return gr.update(), None
-
-    if isinstance(data, bytes):
-        try:
-            image = Image.open(io.BytesIO(data))
-            textinfo, _ = read_info_from_image(image)
-            return textinfo, None
-        except Exception:
-            pass
-
-        try:
-            text = data.decode('utf8')
-            assert len(text) < 10000
-            return text, None
-        except Exception:
-            pass
-
-    import requests
     try:
-        r = requests.get(data, timeout=5)
-        if r.status_code == 200:
-            image = Image.open(io.BytesIO(r.content))
-            textinfo, _ = read_info_from_image(image)
-            return textinfo, None
+        image = read(io.BytesIO(data))
+        textinfo, _ = read_info_from_image(image)
+        return textinfo, None
+    except Exception:
+        pass
+
+    try:
+        text = data.decode('utf8')
+        assert len(text) < 10000
+        return text, None
+
     except Exception:
         pass
 

modules/ui_toprow.py

@@ -82,7 +82,6 @@ class Toprow:
             with gr.Row(elem_id=f"{self.id_part}_prompt_row", elem_classes=["prompt-row"]):
                 self.prompt = gr.Textbox(label="Prompt", elem_id=f"{self.id_part}_prompt", show_label=False, lines=3, placeholder="Prompt\n(Press Ctrl+Enter to generate, Alt+Enter to skip, Esc to interrupt)", elem_classes=["prompt"])
                 self.prompt_img = gr.File(label="", elem_id=f"{self.id_part}_prompt_image", file_count="single", type="binary", visible=False)
-                self.prompt_url = gr.Textbox(label="", elem_id=f"{self.id_part}_prompt_url", visible=False)
 
             with gr.Row(elem_id=f"{self.id_part}_neg_prompt_row", elem_classes=["prompt-row"]):
                 self.negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{self.id_part}_neg_prompt", show_label=False, lines=3, placeholder="Negative prompt\n(Press Ctrl+Enter to generate, Alt+Enter to skip, Esc to interrupt)", elem_classes=["prompt"])
@@ -94,13 +93,6 @@ class Toprow:
             show_progress=False,
         )
 
-        self.prompt_url.input(
-            fn=modules.images.image_data,
-            inputs=[self.prompt_url],
-            outputs=[self.prompt, self.prompt_url],
-            show_progress=False,
-        )
-
     def create_submit_box(self):
         with gr.Row(elem_id=f"{self.id_part}_generate_box", elem_classes=["generate-box"] + (["generate-box-compact"] if self.is_compact else []), render=not self.is_compact) as submit_box:
             self.submit_box = submit_box