refactor App component to manage temporary URLs and prevent memory leaks

src/App.jsx

@@ -25,14 +25,6 @@ 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);
@@ -51,6 +43,7 @@ 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);
@@ -97,6 +90,10 @@ 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];
       
@@ -108,12 +105,13 @@ const App = () => {
       ));
       
       try {
-        // Convert image to base64
-        const base64Image = await toBase64(image.file);
+        // Create a URL for the image file
+        const imageUrl = URL.createObjectURL(image.file);
+        temporaryUrlsRef.current.push(imageUrl);
         
-        // Call the GLIF API
+        // Call the GLIF API with the image URL
         const response = await axios.post('https://simple-api.glif.app/cm7yya7850000la0ckalxpix2', {
-          image: base64Image
+          image: imageUrl
         }, {
           headers: {
             'Authorization': `Bearer ${apiKey}`,
@@ -144,6 +142,10 @@ const App = () => {
       }
     }
     
+    // Clean up temporary URLs after processing is done
+    temporaryUrlsRef.current.forEach(url => URL.revokeObjectURL(url));
+    temporaryUrlsRef.current = [];
+    
     setProgress(100);
     setProcessing(false);
     
@@ -210,14 +212,39 @@ 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':