Cannot drag and drop image from Gallery to Image

[Hantang-Li]

Describe the bug

If my image in the gallery module is a URL, then I cannot do drag and drop. But if the image is a local image or an uploaded one, then the drag-and-drop function works as expected.

I have reproduced the bug below.

Is there an existing issue for this?

• I have searched the existing issues

Reproduction

import gradio as gr

def predict(inp):
return [inp]

gr.Interface(fn=predict,
inputs=gr.Image(type="pil"),
outputs=gr.Gallery(value=["https://raw.githubusercontent.com/gradio-app/gradio/main/readme_files/header-image.jpg"])).launch(show_api=False, server_name="0.0.0.0", server_port=80, debug=True)

Screenshot

No response

Logs

No logs

System Info

gradio==3.32.0
gradio_client==0.2.5
Chrome==Version 113.0.5672.127
System==Ubuntu 20.04.5

Severity

annoying

[abidlabs]

Hi @Hantang-Li I don't understand this issue. Can you include a GIF showing what you are trying to do? It would be great if you can include both examples, one where it is working properly and one where it is not. Thanks

[Hantang-Li]

Hi @abidlabs,

Thanks for your swift response!
Here I attached a gif to clarify the issue.

Not work:

Working properly:

I am deploying the code under the Reproduction section. The gallery uses a Groot image from the URL "https://raw.githubusercontent.com/gradio-app/gradio/main/readme_files/header-image.jpg" as the default image, and I am not able to drag and drop the Groot image to the upload image section.

But if the Gallery module gets an image locally, I can use the drag-and-drop function.

[abidlabs]

Hi @Hantang-Li. I looked into this and I believe that its a browser issue, not a Gradio issue, that prevents dragging and dropping certain kinds of images.

As a workaround, you can use the .select() event of the Gallery component to have the image populate when you click on it. I put together a quick example for you:

import gradio as gr

url = "https://raw.githubusercontent.com/gradio-app/gradio/main/readme_files/header-image.jpg"

def image_click(images, evt: gr.SelectData):
    print(images)
    return images[evt.index]['name']

with gr.Blocks() as demo:
    with gr.Row():
        g = gr.Gallery([url], allow_preview=False)
        i = gr.Image()
        g.select(image_click, g, i)
        
demo.launch()

Let us know if this doesn't work for you and we can try to offer a different solution or reopen this issue for further investigation!