Drag Change Img - Blocked Download

🔒 Gradio
1

Hey,

Not too sure if it’s something I’m doing wrong or an issue with HuggingFace but I’ve created a HuggingFace Space using this code:

import gradio as gr

img_html = '''
<img ondragstart="imgChange(event)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4n_urpJ9XpwOTdzBVbGvactwHrPagYQrTJPYjxfxLGkSyu7nJZVqRVGAeohnPgKMrnKE&usqp=CAU">
'''

img_js = '''
function imgFunc(x){
    let script = document.createElement('script');    
    script.innerHTML = "function imgChange(event){ event.dataTransfer.setData('DownloadURL', 'image/png:test.png:https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png')}"
    document.head.appendChild(script);
}
'''

with gr.Blocks() as app:
    with gr.Row():
        gr.HTML(img_html)
    app.load(_js = img_js)
    
app.launch(debug=True, 
            share=False, 
            height=768,
            )

You can find the space here: Drag Error - a Hugging Face Space by bradley6597

When I try and drag the image into a folder on my computer it looks like it is blocked by Chrome?

A further note: it strangely works when running this locally just not on a HuggingFace space?

Edit: It looks like it is something to do with it being embedded in an iFrame. If the url is a huggingface url I don’t seem to have the same issue.