Fix issue #135 and js formatting

javascript/dragdrop.js

@@ -1,97 +1,108 @@
 // allows drag-dropping files into gradio image elements, and also pasting images from clipboard
 
-function isValidImageList( files ) {
-    return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
+function isValidImageList(files) {
+  return (
+    files &&
+    files?.length === 1 &&
+    ["image/png", "image/gif", "image/jpeg"].includes(files[0].type)
+  );
 }
 
-function dropReplaceImage( imgWrap, files ) {
-    if ( ! isValidImageList( files ) ) {
-        return;
+function dropReplaceImage(imgWrap, files) {
+  if (!isValidImageList(files)) {
+    return;
+  }
+
+  const tmpFile = files[0];
+
+  imgWrap.querySelector('[aria-label="Clear"]')?.click();
+  const callback = () => {
+    const fileInput = imgWrap.querySelector('input[type="file"]');
+    if (fileInput) {
+      if (files.length === 0) {
+        files = new DataTransfer();
+        files.items.add(tmpFile);
+        fileInput.files = files.files;
+      } else {
+        fileInput.files = files;
+      }
+      fileInput.dispatchEvent(new Event("change"));
     }
+  };
 
-    const tmpFile = files[0];
-
-    imgWrap.querySelector('[aria-label="Clear"]')?.click();
-    const callback = () => {
-        const fileInput = imgWrap.querySelector('input[type="file"]');
-        if ( fileInput ) {
-            if ( files.length === 0 ) {
-                files = new DataTransfer();
-                files.items.add(tmpFile);
-                fileInput.files = files.files;
-            } else {
-                fileInput.files = files;
-            }
-            fileInput.dispatchEvent(new Event('change'));   
-        }
+  if (imgWrap.closest("#pnginfo_image")) {
+    // special treatment for PNG Info tab, wait for fetch request to finish
+    const oldFetch = window.fetch;
+    window.fetch = async (input, options) => {
+      const response = await oldFetch(input, options);
+      if ("api/predict/" === input) {
+        const content = await response.text();
+        window.fetch = oldFetch;
+        window.requestAnimationFrame(() => callback());
+        return new Response(content, {
+          status: response.status,
+          statusText: response.statusText,
+          headers: response.headers,
+        });
+      }
+      return response;
     };
-    
-    if ( imgWrap.closest('#pnginfo_image') ) {
-        // special treatment for PNG Info tab, wait for fetch request to finish
-        const oldFetch = window.fetch;
-        window.fetch = async (input, options) => {
-            const response = await oldFetch(input, options);
-            if ( 'api/predict/' === input ) {
-                const content = await response.text();
-                window.fetch = oldFetch;
-                window.requestAnimationFrame( () => callback() );
-                return new Response(content, {
-                    status: response.status,
-                    statusText: response.statusText,
-                    headers: response.headers
-                })
-            }
-            return response;
-        };        
-    } else {
-        window.requestAnimationFrame( () => callback() );
-    }
+  } else {
+    window.requestAnimationFrame(() => callback());
+  }
 }
 
-window.document.addEventListener('dragover', e => {
-    const target = e.composedPath()[0];
-    const imgWrap = target.closest('[data-testid="image"]');
-    if ( !imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
-        return;
-    }
-    e.stopPropagation();
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'copy';
+window.document.addEventListener("dragover", (e) => {
+  const target = e.composedPath()[0];
+  const imgWrap = target.closest('[data-testid="image"]');
+  if (
+    !imgWrap &&
+    target.placeholder &&
+    target.placeholder.indexOf("Prompt") == -1
+  ) {
+    return;
+  }
+  e.stopPropagation();
+  e.preventDefault();
+  e.dataTransfer.dropEffect = "copy";
 });
 
-window.document.addEventListener('drop', e => {
-    const target = e.composedPath()[0];
-    if (target.placeholder.indexOf("Prompt") == -1) {
-        return;
-    }
-    const imgWrap = target.closest('[data-testid="image"]');
-    if ( !imgWrap ) {
-        return;
-    }
-    e.stopPropagation();
-    e.preventDefault();
-    const files = e.dataTransfer.files;
-    dropReplaceImage( imgWrap, files );
+window.document.addEventListener("drop", (e) => {
+  const target = e.composedPath()[0];
+  if (target.placeholder.indexOf("Prompt") == -1) {
+    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 => {
-    const files = e.clipboardData.files;
-    if ( ! isValidImageList( files ) ) {
-        return;
-    }
+window.addEventListener("paste", (e) => {
+  const files = e.clipboardData.files;
+  if (!isValidImageList(files)) {
+    return;
+  }
 
-    const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
-        .filter(el => uiElementIsVisible(el));
-    if ( ! visibleImageFields.length ) {
-        return;
-    }
-    
-    const firstFreeImageField = visibleImageFields
-        .filter(el => el.querySelector('input[type=file]'))?.[0];
+  const visibleImageFields = [
+    ...gradioApp().querySelectorAll('[data-testid="image"]'),
+  ].filter((el) => uiElementIsVisible(el));
+  if (!visibleImageFields.length) {
+    return;
+  }
 
-    dropReplaceImage(
-        firstFreeImageField ?
-        firstFreeImageField :
-        visibleImageFields[visibleImageFields.length - 1]
-    , files );
+  const firstFreeImageField = visibleImageFields.filter((el) =>
+    el.querySelector("input[type=file]")
+  )?.[0];
+
+  dropReplaceImage(
+    firstFreeImageField
+      ? firstFreeImageField
+      : visibleImageFields[visibleImageFields.length - 1],
+    files
+  );
 });