Merge pull request #628 from 48design/drop-paste-replace-existing-image

Replace existing images when pasting from clipboard or dropping a new one (fixes #573)

script.js

@@ -326,12 +326,51 @@ function submit(){
     return res
 }
 
-window.addEventListener('paste', e => {
+function isValidImageList( files ) {
-    const files = e.clipboardData.files;
+    return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
-    if (!files || files.length !== 1) {
+}
+
+function dropReplaceImage( imgWrap, files ) {
+    if ( ! isValidImageList( files ) ) {
         return;
     }
-    if (!['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type)) {
+
+    imgWrap.querySelector('.modify-upload button + button')?.click();
+    window.requestAnimationFrame( () => {
+        const fileInput = imgWrap.querySelector('input[type="file"]');
+        if ( fileInput ) {
+            fileInput.files = files;
+            fileInput.dispatchEvent(new Event('change'));   
+        }
+    });
+}
+
+window.document.addEventListener('dragover', e => {
+    const target = e.composedPath()[0];
+    const imgWrap = target.closest('[data-testid="image"]');
+    if ( !imgWrap ) {
+        return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+});
+
+window.document.addEventListener('drop', e => {
+    const target = e.composedPath()[0];
+    const imgWrap = target.closest('[data-testid="image"]');
+    if ( !imgWrap ) {
+        return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    const files = e.dataTransfer.files;
+    dropReplaceImage( imgWrap, files );
+});
+
+window.addEventListener('paste', e => {
+    const files = e.clipboardData.files;
+    if ( ! isValidImageList( files ) ) {
         return;
     }
     [...gradioApp().querySelectorAll('input[type=file][accept="image/x-png,image/gif,image/jpeg"]')]
@@ -340,6 +379,8 @@ window.addEventListener('paste', e => {
             input.files = files;
             input.dispatchEvent(new Event('change'))
         });
+    [...gradioApp().querySelectorAll('[data-testid="image"]')]
+        .forEach(imgWrap => dropReplaceImage( imgWrap, files ));
 });
 
 function ask_for_style_name(_, prompt_text, negative_prompt_text) {