Upload Media

[
  "image/jpeg",
  "image/png",
  "image/gif",
  "image/webp",
  "video/mp4",
  "video/webm"
]

[".jpg", ".jpeg", ".png", ".gif", ".webp", ".mp4", ".webm"]

users/{userId}/{FolderName}/{source}-{timestamp}-{sanitizedFilename}

users/user_123/General/general-1709856234567-my_image.jpg

{
  "fileUrl": "https://example.supabase.co/storage/v1/object/public/user-media/users/user_123/General/general-1709856234567-vacation_photo.jpg",
  "fileName": "general-1709856234567-vacation_photo.jpg",
  "filePath": "users/user_123/General/general-1709856234567-vacation_photo.jpg",
  "source": "general"
}

{
  "message": "No file uploaded"
}

{
  "message": "File is too large to upload.",
  "error": "FILE_TOO_LARGE",
  "suggestion": "Please use a smaller file or check the upload size limit in settings. Consider compressing your image before uploading."
}

{
  "message": "Upload failed: Invalid MIME type: application/pdf. Only JPEG, PNG, GIF, WebP images, and MP4/WebM videos are allowed.",
  "error": "UPLOAD_ERROR",
  "suggestion": "Please try again with a different file or contact support if the issue persists."
}

{
  "message": "Failed to upload to cloud storage",
  "error": "STORAGE_ERROR",
  "suggestion": "Please try again. If the issue persists, contact support."
}

{
  "message": "File storage is not configured. Please contact support.",
  "error": "STORAGE_CONFIG_ERROR",
  "suggestion": "File uploads are temporarily unavailable. Please try again later or contact support."
}

curl -X POST https://your-domain.com/api/media/upload \
  -H "Cookie: connect.sid=your-session-cookie" \
  -F "file=@/path/to/image.jpg" \
  -F "source=general"

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('source', 'general');

const response = await fetch('/api/media/upload', {
  method: 'POST',
  body: formData,
  credentials: 'include'
});

const result = await response.json();
console.log('Uploaded file:', result.fileUrl);

import { useState } from 'react';

function MediaUploader() {
  const [uploading, setUploading] = useState(false);
  const [uploadedUrl, setUploadedUrl] = useState(null);

  const handleUpload = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    setUploading(true);
    const formData = new FormData();
    formData.append('file', file);
    formData.append('source', 'general');

    try {
      const response = await fetch('/api/media/upload', {
        method: 'POST',
        body: formData,
        credentials: 'include'
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message);
      }

      const result = await response.json();
      setUploadedUrl(result.fileUrl);
    } catch (error) {
      console.error('Upload failed:', error);
      alert(error.message);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div>
      <input 
        type="file" 
        onChange={handleUpload} 
        accept="image/*,video/*"
        disabled={uploading}
      />
      {uploading && <p>Uploading...</p>}
      {uploadedUrl && (
        <div>
          <p>Upload successful!</p>
          <img src={uploadedUrl} alt="Uploaded" style={{ maxWidth: '300px' }} />
        </div>
      )}
    </div>
  );
}