repair file paste for Firefox from #10615

remove animation when pasting files into prompt
rework two dragdrop js files into one
This commit is contained in:
AUTOMATIC 2023-05-22 09:49:51 +03:00
parent 0cbcc4d828
commit ee65e72931
3 changed files with 46 additions and 33 deletions

View File

@ -48,12 +48,27 @@ function dropReplaceImage(imgWrap, files) {
} }
} }
function eventHasFiles(e) {
if (!e.dataTransfer || !e.dataTransfer.files) return false;
if (e.dataTransfer.files.length > 0) return true;
if (e.dataTransfer.items.length > 0 && e.dataTransfer.items[0].kind == "file") return true;
return false;
}
function dragDropTargetIsPrompt(target) {
if (!(target?.placeholder?.indexOf("Prompt") >= 0)) return true;
if (target?.parentNode?.parentNode) return true;
return false;
}
window.document.addEventListener('dragover', e => { window.document.addEventListener('dragover', e => {
const target = e.composedPath()[0]; const target = e.composedPath()[0];
const imgWrap = target.closest('[data-testid="image"]'); if (!eventHasFiles(e)) return;
if (e.dataTransfer.files.length == 0 || (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1)) {
return; var targetImage = target.closest('[data-testid="image"]');
} if (!dragDropTargetIsPrompt(target) && !targetImage) return;
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; e.dataTransfer.dropEffect = 'copy';
@ -61,17 +76,31 @@ window.document.addEventListener('dragover', e => {
window.document.addEventListener('drop', e => { window.document.addEventListener('drop', e => {
const target = e.composedPath()[0]; const target = e.composedPath()[0];
if (e.dataTransfer.files.length == 0 || target.placeholder.indexOf("Prompt") == -1) { if (!eventHasFiles(e)) return;
if (dragDropTargetIsPrompt(target)) {
e.stopPropagation();
e.preventDefault();
let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
const imgParent = gradioApp().getElementById(prompt_target);
const files = e.dataTransfer.files;
const fileInput = imgParent.querySelector('input[type="file"]');
if (fileInput) {
fileInput.files = files;
fileInput.dispatchEvent(new Event('change'));
}
}
var targetImage = target.closest('[data-testid="image"]');
if (targetImage) {
e.stopPropagation();
e.preventDefault();
const files = e.dataTransfer.files;
dropReplaceImage(targetImage, files);
return; return;
} }
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 => { window.addEventListener('paste', e => {

View File

@ -1,18 +0,0 @@
window.onload = (function() {
window.addEventListener('drop', e => {
const target = e.composedPath()[0];
if (e.dataTransfer.files.length == 0 || target.placeholder.indexOf("Prompt") == -1) return;
let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
e.stopPropagation();
e.preventDefault();
const imgParent = gradioApp().getElementById(prompt_target);
const files = e.dataTransfer.files;
const fileInput = imgParent.querySelector('input[type="file"]');
if (fileInput) {
fileInput.files = files;
fileInput.dispatchEvent(new Event('change'));
}
});
});

View File

@ -616,7 +616,8 @@ def create_ui():
outputs=[ outputs=[
txt2img_prompt, txt2img_prompt,
txt_prompt_img txt_prompt_img
] ],
show_progress=False,
) )
enable_hr.change( enable_hr.change(
@ -902,7 +903,8 @@ def create_ui():
outputs=[ outputs=[
img2img_prompt, img2img_prompt,
img2img_prompt_img img2img_prompt_img
] ],
show_progress=False,
) )
img2img_args = dict( img2img_args = dict(