change from base64 to file upload

app.py

@@ -293,6 +293,58 @@ def upload_file():
         print(f"Error in upload endpoint: {str(e)}")
         return jsonify({'error': str(e)}), 500
 
+@app.route('/api/upload-to-fal', methods=['POST'])
+def upload_to_fal():
+    """Upload base64 image data to FAL storage and return the URL"""
+    try:
+        data = request.json
+        if 'image_data' not in data:
+            return jsonify({'error': 'No image data provided'}), 400
+        
+        # Get API key from header or environment
+        auth_header = request.headers.get('Authorization', '')
+        if auth_header.startswith('Bearer '):
+            api_key = auth_header.replace('Bearer ', '')
+        elif os.environ.get('FAL_KEY'):
+            api_key = os.environ.get('FAL_KEY')
+        else:
+            return jsonify({'error': 'API key not provided'}), 401
+        
+        # Set API key for this request
+        os.environ['FAL_KEY'] = api_key
+        
+        image_data = data['image_data']
+        
+        # If it's a base64 data URL, extract the actual base64 content
+        if image_data.startswith('data:'):
+            # Extract base64 content from data URL
+            header, base64_content = image_data.split(',', 1)
+            # Decode base64 to bytes
+            image_bytes = base64.b64decode(base64_content)
+            
+            # Save to temporary file
+            with tempfile.NamedTemporaryFile(suffix='.png', delete=False) as tmp_file:
+                tmp_file.write(image_bytes)
+                tmp_file_path = tmp_file.name
+            
+            try:
+                # Upload to FAL using asyncio.run
+                fal_url = asyncio.run(fal_client.upload_file_async(tmp_file_path))
+                print(f"[DEBUG] Uploaded to FAL: {fal_url}")
+                return jsonify({'url': fal_url}), 200
+            finally:
+                # Clean up temporary file
+                os.unlink(tmp_file_path)
+        else:
+            # If it's already a URL, return it as-is
+            return jsonify({'url': image_data}), 200
+            
+    except Exception as e:
+        print(f"Error uploading to FAL: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'error': str(e)}), 500
+
 @app.route('/health', methods=['GET'])
 def health_check():
     """Health check endpoint for container monitoring"""

static/script.js

@@ -368,11 +368,58 @@ function getImageSize() {
     return size;
 }
 
+// Upload image to FAL storage
+async function uploadImageToFal(imageData, apiKey) {
+    try {
+        const response = await fetch('/api/upload-to-fal', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${apiKey}`
+            },
+            body: JSON.stringify({ image_data: imageData })
+        });
+        
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(error || 'Failed to upload image to FAL');
+        }
+        
+        const data = await response.json();
+        return data.url;
+    } catch (error) {
+        console.error('Error uploading to FAL:', error);
+        throw error;
+    }
+}
+
 // Prepare image URLs for API
 async function getImageUrlsForAPI() {
     const urls = [];
-    urls.push(...uploadedImages);
+    const apiKey = getAPIKey();
+    
+    // Process uploaded base64 images - upload to FAL first
+    for (let i = 0; i < uploadedImages.length; i++) {
+        const imageData = uploadedImages[i];
+        
+        // If it's a base64 data URL, upload to FAL
+        if (imageData.startsWith('data:')) {
+            try {
+                addLog(`Uploading image ${i + 1} to FAL storage...`);
+                const falUrl = await uploadImageToFal(imageData, apiKey);
+                urls.push(falUrl);
+                addLog(`Image ${i + 1} uploaded successfully`);
+            } catch (error) {
+                addLog(`Failed to upload image ${i + 1}: ${error.message}`);
+                throw error;
+            }
+        } else {
+            // Already a URL, use as-is
+            urls.push(imageData);
+        }
+    }
     
+    // Add text URLs directly
     const textUrls = imageUrls.value.trim().split('\n').filter(url => url.trim());
     for (const url of textUrls) {
         urls.push(url);
@@ -427,7 +474,7 @@ async function generateEdit() {
     currentInfo.innerHTML = '';
     clearLogs();
     
-    showStatus('Connecting to FAL API...', 'info');
+    showStatus('Preparing images and connecting to FAL API...', 'info');
     progressLogs.classList.add('active');
     
     const requestData = {
@@ -438,6 +485,7 @@ async function generateEdit() {
     };
     
     if (!isTextToImage) {
+        // Note: imageUrlsArray will now contain FAL URLs after upload
         requestData.image_urls = imageUrlsArray;
         requestData.max_images = parseInt(document.getElementById('maxImages').value);
     }
@@ -668,6 +716,8 @@ async function useAsInput(imageId, imageSrc) {
             return;
         }
         
+        // If the image is already a FAL URL (from history), use it directly
+        // Otherwise, it's a base64 image that will be uploaded when generating
         uploadedImages.push(imageSrc);
         
         // Get dimensions