Fix: surface upload errors & validate video uploads

video/README.md

@@ -0,0 +1,26 @@
+## Video app — deployment & upload troubleshooting
+
+When uploads fail on a deployed instance but work locally, this is commonly caused by missing environment variables or the runtime not allowing temporary files to be read by the server.
+
+Quick checks:
+
+- Ensure the server environment has the API key available under `VITE_GEMINI_API_KEY`.
+  - Locally the dev server reads `.env` (see `package.json` dev script) or you can set the environment variable before running the server.
+- If your hosting provider prevents the runtime from writing to `/tmp`, change `multer`'s destination in `server/index.mjs` to a writable location.
+- If the upload fails the server will now return a helpful JSON message in the response body (e.g. `{ "error": "VITE_GEMINI_API_KEY is not set on the server" }`). These messages will be visible in the UI.
+
+How to run locally for quick debugging:
+
+1. Add a `.env` file in `/video` with a valid key (or set `VITE_GEMINI_API_KEY` in your shell):
+
+   VITE_GEMINI_API_KEY=your_api_key_here
+
+2. Start the app:
+
+   npm run dev
+
+3. Use the included curl helper (`test-upload.sh`) to simulate uploading a file to the server:
+
+   ./test-upload.sh /path/to/sample.mp4
+
+This will show the raw API response and help identify cases like missing API keys, invalid mime types, or other upload errors.

video/server/index.mjs

@@ -27,7 +27,9 @@ app.post('/api/upload', upload.single('video'), async (req, res) => {
     const resp = await uploadVideo(file)
     res.json({data: resp})
   } catch (error) {
-    res.status(500).json({error})
+    // Error can be an Error object; return a structured JSON message to the client
+    console.error('/api/upload error:', error)
+    res.status(500).json({error: error?.message || String(error)})
   }
 })
 
@@ -50,7 +52,8 @@ app.post('/api/prompt', async (req, res) => {
     )
     res.json(videoResponse)
   } catch (error) {
-    res.json({error}, {status: 400})
+    console.error('/api/prompt error:', error)
+    res.status(400).json({error: error?.message || String(error)})
   }
 })
 

video/server/upload.mjs

@@ -16,14 +16,41 @@ import {GoogleGenerativeAI} from '@google/generative-ai'
 import {GoogleAIFileManager} from '@google/generative-ai/server'
 
 const key = process.env.VITE_GEMINI_API_KEY
+
+if (!key) {
+  // Fail fast with a clear message so deployments without a key don't silently
+  // accept uploads then fail later.
+  console.error('VITE_GEMINI_API_KEY is missing from environment variables')
+  throw new Error('VITE_GEMINI_API_KEY is not set on the server')
+}
+
 const fileManager = new GoogleAIFileManager(key)
 const genAI = new GoogleGenerativeAI(key)
 
 export const uploadVideo = async file => {
   try {
+    // Basic validation: ensure the incoming file looks like a video and has a
+    // filename. This avoids uploading unsupported files (or empty bodies) to
+    // the file manager which will fail later and is harder to debug.
+    if (!file || !file.path || !file.originalname) {
+      const msg = 'Missing file or invalid upload payload (file.path or originalname)'
+      console.error(msg, file)
+      throw new Error(msg)
+    }
+
+    // Prefer explicit video MIME types; multer may sometimes set generic
+    // application/octet-stream depending on environment. Only allow common
+    // video types for now.
+    const mimeType = file.mimetype || 'application/octet-stream'
+    if (!mimeType.startsWith('video/')) {
+      const msg = `Unsupported mimeType: ${mimeType}. Expected a video/* type.`
+      console.error(msg)
+      throw new Error(msg)
+    }
+
     const uploadResult = await fileManager.uploadFile(file.path, {
       displayName: file.originalname,
-      mimeType: file.mimetype
+      mimeType: mimeType
     })
     return uploadResult.file
   } catch (error) {
@@ -37,8 +64,8 @@ export const checkProgress = async fileId => {
     const result = await fileManager.getFile(fileId)
     return result
   } catch (error) {
-    console.error(error)
-    return {error}
+    console.error('checkProgress errored:', error)
+    return {error: error?.message || String(error)}
   }
 }
 
@@ -61,7 +88,7 @@ export const promptVideo = async (uploadResult, prompt, model) => {
       feedback: result.response.promptFeedback
     }
   } catch (error) {
-    console.error(error)
-    return {error}
+    console.error('promptVideo errored:', error)
+    return {error: error?.message || String(error)}
   }
 }

video/src/App.jsx

@@ -33,6 +33,7 @@ export default function App() {
   const [isLoading, setIsLoading] = useState(false)
   const [showSidebar, setShowSidebar] = useState(true)
   const [isLoadingVideo, setIsLoadingVideo] = useState(false)
+  // videoError will hold a user-friendly message string or false when no error
   const [videoError, setVideoError] = useState(false)
   const [customPrompt, setCustomPrompt] = useState('')
   const [chartMode, setChartMode] = useState(chartModes[0])
@@ -96,14 +97,27 @@ export default function App() {
 
     const formData = new FormData()
     formData.set('video', e.dataTransfer.files[0])
-    const resp = await (
-      await fetch('/api/upload', {
+    try {
+      const uploadResponse = await fetch('/api/upload', {
         method: 'POST',
         body: formData
       })
-    ).json()
-    setFile(resp.data)
-    checkProgress(resp.data.name)
+
+      if (!uploadResponse.ok) {
+        const errJson = await uploadResponse.json().catch(() => ({}))
+        const msg = errJson?.error || `Upload failed with status ${uploadResponse.status}`
+        setVideoError(msg)
+        setIsLoadingVideo(false)
+        return
+      }
+
+      const resp = await uploadResponse.json()
+      setFile(resp.data)
+      checkProgress(resp.data.name)
+    } catch (err) {
+      setVideoError(err?.message || String(err))
+      setIsLoadingVideo(false)
+    }
   }
 
   const checkProgress = async fileId => {

video/src/VideoPlayer.jsx

@@ -176,11 +176,11 @@ export default function VideoPlayer({
       ) : (
         <div className="emptyVideo">
           <p>
-            {isLoadingVideo
-              ? 'Processing video...'
-              : videoError
-              ? 'Error processing video.'
-              : 'Drag and drop a video file here to get started.'}
+                {isLoadingVideo
+                  ? 'Processing video...'
+                  : videoError
+                  ? `Error processing video: ${videoError}`
+                  : 'Drag and drop a video file here to get started.'}
           </p>
         </div>
       )}

video/test-upload.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+# Simple helper to upload a file to a running local dev server
+# Usage: ./test-upload.sh /path/to/file.mp4
+
+set -eu
+if [ $# -ne 1 ]; then
+  echo "Usage: $0 /path/to/video.mp4"
+  exit 1
+fi
+
+FILE=$1
+ENDPOINT=${ENDPOINT:-http://localhost:8000/api/upload}
+
+if [ ! -f "$FILE" ]; then
+  echo "File not found: $FILE"
+  exit 1
+fi
+
+curl -v -F "video=@${FILE}" "$ENDPOINT" | jq || true