@nyris/nyris-webapp 0.3.74 → 0.3.75

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.74",
+  "version": "0.3.75",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
-    "@nyris/nyris-api": "^0.3.74",
-    "@nyris/nyris-react-components": "^0.3.74",
+    "@nyris/nyris-api": "^0.3.75",
+    "@nyris/nyris-react-components": "^0.3.75",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",

package/src/components/DragDropFile.tsx

@@ -24,12 +24,12 @@ function DragDropFile(props: Props) {
   const { singleImageSearch } = useImageSearch();
   const { cadSearch } = useCadSearch();
 
-  const handleUpload = (files: File[]) => {
+  const handleUpload = (file: File) => {
     navigate('/result');
 
-    if (isCadFile(files[0])) {
+    if (isCadFile(file)) {
       cadSearch({
-        file: files[0],
+        file: file,
         settings: window.settings,
         newSearch: true,
       }).then(res => {});
@@ -38,7 +38,7 @@ function DragDropFile(props: Props) {
     }
 
     singleImageSearch({
-      image: files[0],
+      image: file,
       settings: window.settings,
       showFeedback: true,
     }).then(() => {});
@@ -78,9 +78,10 @@ function DragDropFile(props: Props) {
           </div>
           <input
             onChange={e => {
+              console.log({ e });
               e.stopPropagation();
-              if (e.target.files) {
-                handleUpload(Array.from(e.target.files));
+              if (e.target.files && e.target.files[0]) {
+                handleUpload(e.target.files[0]);
                 e.target.value = '';
               }
             }}

package/src/components/Product/Product.tsx

@@ -140,7 +140,7 @@ function Product(props: Props) {
                 <img
                   src={main_image_link}
                   key={main_image_link}
-                  alt="image_item"
+                  alt=""
                   className="img-style product-image"
                   style={{
                     width: '100%',

package/src/hooks/useDragAndDrop.ts

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 
 interface UseDragAndDropOptions {
-  onDropCallback?: (files: File[]) => void;
+  onDropCallback?: (file: File) => void;
 }
 
 interface UseDragAndDropReturn {
@@ -13,6 +13,23 @@ interface UseDragAndDropReturn {
   };
 }
 
+const getImageFromUrl = async (
+  url: string,
+  onDownload: (file: File) => void,
+) => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const file = new File([blob], 'image.png', { type: blob.type });
+    // URL.createObjectURL(file);
+    if (onDownload) {
+      onDownload(file);
+    }
+  } catch (err) {
+    console.error('Failed to fetch image:', err);
+  }
+};
+
 const useDragAndDrop = ({
   onDropCallback,
 }: UseDragAndDropOptions = {}): UseDragAndDropReturn => {
@@ -29,13 +46,21 @@ const useDragAndDrop = ({
   }, []);
 
   const onDrop = useCallback(
-    (event: React.DragEvent) => {
+    async (event: React.DragEvent) => {
       event.preventDefault();
       setIsDragging(false);
 
-      const droppedFiles = Array.from(event.dataTransfer.files);
+      const url =
+        event.dataTransfer.getData('text/uri-list') ||
+        event.dataTransfer.getData('text/plain');
+
+      if (url && url.startsWith('http') && onDropCallback) {
+        getImageFromUrl(url, onDropCallback);
+        return;
+      }
+
       if (onDropCallback) {
-        onDropCallback(droppedFiles);
+        onDropCallback(event.dataTransfer.files[0]);
       }
     },
     [onDropCallback],