add image upload functionality to Cloudinary and remove temporary URL management

.gitignore

@@ -0,0 +1,22 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

src/App.jsx

@@ -25,6 +25,14 @@ import axios from 'axios';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
 
+// Function to convert file to base64
+const toBase64 = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => resolve(reader.result.split(',')[1]);
+  reader.onerror = error => reject(error);
+});
+
 // Function to get file extension
 const getFileExtension = filename => {
   return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
@@ -35,6 +43,29 @@ const getFilenameWithoutExtension = filename => {
   return filename.substring(0, filename.lastIndexOf("."));
 }
 
+// Function to upload image to Cloudinary
+const uploadToCloudinary = async (file) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('upload_preset', process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET);
+  
+  try {
+    const response = await axios.post(
+      process.env.REACT_APP_CLOUDINARY_UPLOAD_URL,
+      formData
+    );
+    
+    if (response.status === 200) {
+      return response.data.secure_url;
+    } else {
+      throw new Error('Failed to upload to Cloudinary');
+    }
+  } catch (error) {
+    console.error('Error uploading to Cloudinary:', error);
+    throw error;
+  }
+};
+
 const App = () => {
   const [apiKey, setApiKey] = useState('');
   const [uploadedImages, setUploadedImages] = useState([]);
@@ -43,7 +74,6 @@ const App = () => {
   const [progress, setProgress] = useState(0);
   const fileInputRef = useRef(null);
   const toast = useToast();
-  const temporaryUrlsRef = useRef([]);
 
   const handleFileChange = async (e) => {
     const files = Array.from(e.target.files);
@@ -90,10 +120,6 @@ const App = () => {
     setProcessing(true);
     const pendingImages = uploadedImages.filter(img => img.status === 'pending');
     
-    // Clean up any previous temporary URLs
-    temporaryUrlsRef.current.forEach(url => URL.revokeObjectURL(url));
-    temporaryUrlsRef.current = [];
-    
     for (let i = 0; i < pendingImages.length; i++) {
       const image = pendingImages[i];
       
@@ -105,13 +131,12 @@ const App = () => {
       ));
       
       try {
-        // Create a URL for the image file
-        const imageUrl = URL.createObjectURL(image.file);
-        temporaryUrlsRef.current.push(imageUrl);
+        // First upload image to Cloudinary
+        const cloudinaryUrl = await uploadToCloudinary(image.file);
         
-        // Call the GLIF API with the image URL
+        // Call the GLIF API with the Cloudinary URL
         const response = await axios.post('https://simple-api.glif.app/cm7yya7850000la0ckalxpix2', {
-          image: imageUrl
+          image: cloudinaryUrl
         }, {
           headers: {
             'Authorization': `Bearer ${apiKey}`,
@@ -142,10 +167,6 @@ const App = () => {
       }
     }
     
-    // Clean up temporary URLs after processing is done
-    temporaryUrlsRef.current.forEach(url => URL.revokeObjectURL(url));
-    temporaryUrlsRef.current = [];
-    
     setProgress(100);
     setProcessing(false);
     
@@ -212,39 +233,14 @@ const App = () => {
   };
 
   const removeImage = (id) => {
-    // Find the image to remove
-    const imageToRemove = uploadedImages.find(img => img.id === id);
-    if (imageToRemove && imageToRemove.preview) {
-      // Revoke the object URL to prevent memory leaks
-      URL.revokeObjectURL(imageToRemove.preview);
-    }
-    
     setUploadedImages(prev => prev.filter(img => img.id !== id));
   };
 
   const clearAll = () => {
-    // Revoke all preview URLs to prevent memory leaks
-    uploadedImages.forEach(img => {
-      if (img.preview) URL.revokeObjectURL(img.preview);
-    });
-    
     setUploadedImages([]);
     if (fileInputRef.current) fileInputRef.current.value = '';
   };
 
-  // Clean up URLs when component unmounts
-  React.useEffect(() => {
-    return () => {
-      // Clean up all preview URLs
-      uploadedImages.forEach(img => {
-        if (img.preview) URL.revokeObjectURL(img.preview);
-      });
-      
-      // Clean up temporary URLs
-      temporaryUrlsRef.current.forEach(url => URL.revokeObjectURL(url));
-    };
-  }, []);
-
   const getStatusBadge = (status) => {
     switch (status) {
       case 'pending':