@jmruthers/pace-core 0.5.87 → 0.5.88

package/src/components/FileUpload/FileUpload.tsx

@@ -1,237 +1,581 @@
-/**
- * File upload component with app-segregated storage
- */
+// File Upload Component
+// Provides a file upload interface using the file reference system
 
-import React, { useCallback, useState } from 'react';
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { SupabaseClient } from '@supabase/supabase-js';
-import { validateFileSize, formatFileSize } from '../../utils/storage';
-import { useFileUpload } from '../../hooks/useStorage';
-import { Button } from '../Button/Button';
-import { Progress } from '../Progress/Progress';
-import { Alert } from '../Alert/Alert';
+import { FileCategory, FileUploadResult, UploadProgress } from '../../types/file-reference';
+import { useFileReference } from '../../hooks/useFileReference';
+import { getCurrentAppName } from '../../utils/appNameResolver';
+import { getAppId } from '../../utils/appIdResolver';
 
 export interface FileUploadProps {
   supabase: SupabaseClient;
-  appName: string;
-  orgId: string;
-  onUploadComplete?: (result: { success: boolean; path?: string; error?: string }) => void;
-  onUploadStart?: () => void;
+  table_name: string;
+  record_id: string;
+  organisation_id: string;
+  app_id?: string; // Optional - will be resolved from app name if not provided
+  category: FileCategory;
   accept?: string;
   maxSize?: number;
   multiple?: boolean;
   disabled?: boolean;
+  isPublic?: boolean; // Whether files should be uploaded to public-files bucket
   className?: string;
+  showPreview?: boolean; // Show image preview for accepted files
+  showProgress?: boolean; // Show upload progress bar
+  onUploadSuccess?: (result: FileUploadResult) => void;
+  onUploadError?: (error: string, file?: File) => void;
+  onProgress?: (progress: UploadProgress) => void;
   children?: React.ReactNode;
 }
 
+interface FileUploadState {
+  file: File;
+  progress: UploadProgress;
+  preview?: string;
+  result?: FileUploadResult;
+}
+
 export function FileUpload({
   supabase,
-  appName,
-  orgId,
-  onUploadComplete,
-  onUploadStart,
+  table_name,
+  record_id,
+  organisation_id,
+  app_id,
+  category,
   accept = '*/*',
-  maxSize,
+  maxSize = 10 * 1024 * 1024, // 10MB default
   multiple = false,
   disabled = false,
+  isPublic = false,
   className = '',
+  showPreview = true,
+  showProgress = true,
+  onUploadSuccess,
+  onUploadError,
+  onProgress,
   children
 }: FileUploadProps) {
-  const [dragActive, setDragActive] = useState(false);
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-  const [validationErrors, setValidationErrors] = useState<string[]>([]);
-
-  const { uploadWithProgress, uploadProgress, isUploading, uploadError } = useFileUpload({
-    supabase,
-    appName,
-    orgId
-  });
-
-  // Validate files
-  const validateFiles = useCallback((files: File[]): string[] => {
-    const errors: string[] = [];
-
-    files.forEach((file, index) => {
-      // Check file size
-      const sizeValidation = validateFileSize(file);
-      if (!sizeValidation.isValid) {
-        errors.push(`File ${index + 1}: ${sizeValidation.error}`);
+  const [isDragging, setIsDragging] = useState(false);
+  const [uploadStates, setUploadStates] = useState<Map<string, FileUploadState>>(new Map());
+  const [resolvedAppId, setResolvedAppId] = useState<string | null>(app_id || null);
+  const [isResolvingAppId, setIsResolvingAppId] = useState(!app_id);
+  const [appIdError, setAppIdError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { uploadFile, isLoading, error } = useFileReference(supabase);
+
+  // Resolve app_id from app name if not provided
+  useEffect(() => {
+    if (app_id) {
+      // If app_id is provided, use it directly
+      setResolvedAppId(app_id);
+      setIsResolvingAppId(false);
+      setAppIdError(null);
+      return;
+    }
+
+    // Otherwise, resolve from app name
+    const resolveAppId = async () => {
+      setIsResolvingAppId(true);
+      setAppIdError(null);
+
+      try {
+        const appName = getCurrentAppName();
+        if (!appName) {
+          const errorMsg = 'App ID is required. Either provide app_id prop or set app name via setRBACAppName()';
+          setAppIdError(errorMsg);
+          setIsResolvingAppId(false);
+          return;
+        }
+
+        const resolvedId = await getAppId(supabase, appName);
+        if (!resolvedId) {
+          const errorMsg = `Failed to resolve app ID for app name "${appName}". Make sure the app is registered in rbac_apps table.`;
+          setAppIdError(errorMsg);
+          setIsResolvingAppId(false);
+          return;
+        }
+
+        setResolvedAppId(resolvedId);
+        setIsResolvingAppId(false);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to resolve app ID';
+        setAppIdError(errorMessage);
+        setIsResolvingAppId(false);
       }
+    };
+
+    resolveAppId();
+  }, [app_id, supabase]);
 
-      // Check custom max size
-      if (maxSize && file.size > maxSize) {
-        const fileMB = Math.round(file.size / (1024 * 1024));
-        const maxMB = Math.round(maxSize / (1024 * 1024));
-        errors.push(`File ${index + 1}: Size (${fileMB}MB) exceeds limit (${maxMB}MB)`);
+  // Calculate isUploading and isDisabled early so they can be used in callbacks
+  const isUploading = useMemo(() => {
+    return uploadStates.size > 0 && Array.from(uploadStates.values()).some(state => 
+      state.progress.status === 'uploading' || state.progress.status === 'processing'
+    );
+  }, [uploadStates]);
+
+  const isDisabled = useMemo(() => {
+    return disabled || isUploading || isResolvingAppId || !resolvedAppId;
+  }, [disabled, isUploading, isResolvingAppId, resolvedAppId]);
+
+  // Generate preview URL for images
+  const generatePreview = useCallback((file: File): Promise<string | null> => {
+    return new Promise((resolve) => {
+      if (!file.type.startsWith('image/')) {
+        resolve(null);
+        return;
       }
+      
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        resolve(e.target?.result as string || null);
+      };
+      reader.onerror = () => resolve(null);
+      reader.readAsDataURL(file);
     });
+  }, []);
+
+  // Validate file
+  const validateFile = useCallback((file: File): string | null => {
+    // Check file size
+    if (file.size > maxSize) {
+      return `File "${file.name}" exceeds maximum size of ${Math.round(maxSize / 1024 / 1024)}MB`;
+    }
+
+    // Check file type if accept is specified
+    if (accept !== '*/*') {
+      const acceptedTypes = accept.split(',').map(type => type.trim());
+      const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
+      const fileMimeType = file.type;
 
-    return errors;
-  }, [maxSize]);
+      const isAccepted = acceptedTypes.some(accepted => {
+        if (accepted.startsWith('.')) {
+          // Extension match
+          return accepted === fileExtension;
+        } else if (accepted.includes('/*')) {
+          // MIME type wildcard (e.g., "image/*")
+          const baseType = accepted.split('/')[0];
+          return fileMimeType.startsWith(baseType + '/');
+        } else {
+          // Exact MIME type match
+          return accepted === fileMimeType;
+        }
+      });
 
-  // Handle file selection
-  const handleFileSelect = useCallback((files: FileList | null) => {
-    if (!files) return;
+      if (!isAccepted) {
+        return `File "${file.name}" is not an accepted format. Accepted: ${accept}`;
+      }
+    }
+
+    return null;
+  }, [accept, maxSize]);
+
+  const handleFileSelect = useCallback(async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
 
     const fileArray = Array.from(files);
-    const errors = validateFiles(fileArray);
+    
+    // Validate all files first
+    const validationErrors: string[] = [];
+    const validFiles: File[] = [];
+
+    for (const file of fileArray) {
+      const error = validateFile(file);
+      if (error) {
+        validationErrors.push(error);
+        onUploadError?.(error, file);
+      } else {
+        validFiles.push(file);
+      }
+    }
+
+    if (validFiles.length === 0) {
+      return;
+    }
+
+    // Initialize upload states
+    const newUploadStates = new Map<string, FileUploadState>();
+    
+    for (const file of validFiles) {
+      const fileId = `${file.name}-${file.size}-${Date.now()}`;
+      const preview = showPreview ? (await generatePreview(file)) || undefined : undefined;
+      
+      const progress: UploadProgress = {
+        loaded: 0,
+        total: file.size,
+        percentage: 0,
+        fileName: file.name,
+        status: 'idle'
+      };
+
+      newUploadStates.set(fileId, {
+        file,
+        progress,
+        preview
+      });
+    }
+
+    setUploadStates(newUploadStates);
+
+    // Upload files sequentially
+    for (const [fileId, uploadState] of newUploadStates.entries()) {
+      const { file } = uploadState;
+
+      // Update status to uploading
+      setUploadStates(prev => {
+        const updated = new Map(prev);
+        const state = updated.get(fileId);
+        if (state) {
+          updated.set(fileId, {
+            ...state,
+            progress: {
+              ...state.progress,
+              status: 'uploading'
+            }
+          });
+        }
+        return updated;
+      });
+
+      try {
+        // Simulate progress updates (Supabase doesn't provide real progress, so we estimate)
+        const progressInterval = setInterval(() => {
+          setUploadStates(prev => {
+            const updated = new Map(prev);
+            const state = updated.get(fileId);
+            if (state && state.progress.status === 'uploading') {
+              const estimatedProgress = Math.min(
+                state.progress.percentage + 10,
+                90
+              );
+              const newProgress: UploadProgress = {
+                ...state.progress,
+                percentage: estimatedProgress,
+                loaded: Math.floor((estimatedProgress / 100) * file.size)
+              };
+              onProgress?.(newProgress);
+              updated.set(fileId, {
+                ...state,
+                progress: newProgress
+              });
+            }
+            return updated;
+          });
+        }, 200);
+
+
+        // Use resolved app_id
+        if (!resolvedAppId) {
+          const errorMsg = appIdError || 'App ID not available. Please provide app_id prop or set app name.';
+          throw new Error(errorMsg);
+        }
 
-    setValidationErrors(errors);
-    setSelectedFiles(fileArray);
-  }, [validateFiles]);
+        const result = await uploadFile({
+          table_name,
+          record_id,
+          organisation_id,
+          app_id: resolvedAppId,
+          category,
+          is_public: isPublic
+        }, file);
 
-  // Handle drag events
-  const handleDrag = useCallback((e: React.DragEvent) => {
+        clearInterval(progressInterval);
+
+        if (result) {
+          // Update status to completed
+          setUploadStates(prev => {
+            const updated = new Map(prev);
+            const state = updated.get(fileId);
+            if (state) {
+              updated.set(fileId, {
+                ...state,
+                progress: {
+                  ...state.progress,
+                  status: 'completed',
+                  percentage: 100,
+                  loaded: file.size
+                },
+                result
+              });
+            }
+            return updated;
+          });
+
+          const finalProgress: UploadProgress = {
+            loaded: file.size,
+            total: file.size,
+            percentage: 100,
+            fileName: file.name,
+            status: 'completed'
+          };
+          onProgress?.(finalProgress);
+          onUploadSuccess?.(result);
+
+          // Remove from upload states after a delay
+          setTimeout(() => {
+            setUploadStates(prev => {
+              const updated = new Map(prev);
+              updated.delete(fileId);
+              return updated;
+            });
+          }, 3000); // Keep success state for 3 seconds
+        } else {
+          // Update status to error
+          setUploadStates(prev => {
+            const updated = new Map(prev);
+            const state = updated.get(fileId);
+            if (state) {
+              updated.set(fileId, {
+                ...state,
+                progress: {
+                  ...state.progress,
+                  status: 'error',
+                  error: 'Upload failed'
+                }
+              });
+            }
+            return updated;
+          });
+
+          const errorProgress: UploadProgress = {
+            loaded: 0,
+            total: file.size,
+            percentage: 0,
+            fileName: file.name,
+            status: 'error',
+            error: 'Upload failed'
+          };
+          onProgress?.(errorProgress);
+          onUploadError?.('Upload failed', file);
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Upload failed';
+        
+        setUploadStates(prev => {
+          const updated = new Map(prev);
+          const state = updated.get(fileId);
+          if (state) {
+            updated.set(fileId, {
+              ...state,
+              progress: {
+                ...state.progress,
+                status: 'error',
+                error: errorMessage
+              }
+            });
+          }
+          return updated;
+        });
+
+        const errorProgress: UploadProgress = {
+          loaded: 0,
+          total: file.size,
+          percentage: 0,
+          fileName: file.name,
+          status: 'error',
+          error: errorMessage
+        };
+        onProgress?.(errorProgress);
+        onUploadError?.(errorMessage, file);
+      }
+    }
+  }, [uploadFile, table_name, record_id, organisation_id, resolvedAppId, category, isPublic, maxSize, onUploadSuccess, onUploadError, onProgress, validateFile, generatePreview, showPreview, appIdError]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    if (e.type === 'dragenter' || e.type === 'dragover') {
-      setDragActive(true);
-    } else if (e.type === 'dragleave') {
-      setDragActive(false);
+    if (!isDisabled) {
+      setIsDragging(true);
     }
+  }, [isDisabled]);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
   }, []);
 
   const handleDrop = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    setDragActive(false);
-
-    if (disabled) return;
-
+    setIsDragging(false);
+    
+    if (isDisabled) return;
+    
     const files = e.dataTransfer.files;
     handleFileSelect(files);
-  }, [disabled, handleFileSelect]);
+  }, [isDisabled, handleFileSelect]);
 
-  // Handle file input change
   const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     handleFileSelect(e.target.files);
+    // Reset input value to allow re-uploading the same file
+    if (e.target) {
+      e.target.value = '';
+    }
   }, [handleFileSelect]);
 
-  // Handle upload
-  const handleUpload = useCallback(async () => {
-    if (selectedFiles.length === 0 || validationErrors.length > 0) return;
-
-    onUploadStart?.();
-
-    for (const file of selectedFiles) {
-      const result = await uploadWithProgress(file);
-      onUploadComplete?.(result);
+  const handleClick = useCallback(() => {
+    if (!isDisabled && fileInputRef.current) {
+      fileInputRef.current.click();
     }
+  }, [isDisabled]);
 
-    // Reset selection
-    setSelectedFiles([]);
-    setValidationErrors([]);
-  }, [selectedFiles, validationErrors, uploadWithProgress, onUploadComplete, onUploadStart]);
-
-  // Handle clear
-  const handleClear = useCallback(() => {
-    setSelectedFiles([]);
-    setValidationErrors([]);
-  }, []);
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
 
-  const canUpload = selectedFiles.length > 0 && validationErrors.length === 0 && !isUploading && !disabled;
+  const dragClasses = isDragging ? 'border-main-500 bg-main-50' : 'border-sec-300 hover:border-sec-400';
+  const disabledClasses = isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-sec-50';
 
   return (
-    <div className={`file-upload ${className}`}>
-      {/* Drop zone */}
+    <div className={`space-y-4 ${className}`}>
       <div
-        className={`file-upload__dropzone ${
-          dragActive ? 'file-upload__dropzone--active' : ''
-        } ${disabled ? 'file-upload__dropzone--disabled' : ''}`}
-        onDragEnter={handleDrag}
-        onDragLeave={handleDrag}
-        onDragOver={handleDrag}
+        className={`relative border-2 border-dashed rounded-lg p-6 text-center transition-colors ${dragClasses} ${disabledClasses}`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
         onDrop={handleDrop}
+        onClick={!isDisabled ? handleClick : undefined}
       >
-        <input
-          type="file"
-          accept={accept}
-          multiple={multiple}
-          onChange={handleFileInputChange}
-          disabled={disabled}
-          className="file-upload__input"
-        />
-        
         {children || (
-          <div className="file-upload__content">
-            <p className="file-upload__text">
-              {dragActive ? 'Drop files here' : 'Drag and drop files here or click to select'}
-            </p>
-            <Button
-              type="button"
-              variant="outline"
-              disabled={disabled}
-              onClick={() => (document.querySelector('.file-upload__input') as HTMLInputElement)?.click()}
-            >
-              Select Files
-            </Button>
+          <div className="space-y-2">
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={accept}
+              multiple={multiple}
+              onChange={handleFileInputChange}
+              className="hidden"
+              disabled={isDisabled}
+              data-testid="file-input"
+            />
+            <div className="text-sec-600">
+              {isResolvingAppId ? (
+                'Resolving app configuration...'
+              ) : isDragging ? (
+                'Drop files here...'
+              ) : (
+                <>
+                  <span className="font-medium">Click to upload</span>
+                  {' '}or drag and drop
+                </>
+              )}
+            </div>
+            <div className="text-sm text-sec-500">
+              {!isResolvingAppId && accept !== '*/*' && `Accepted formats: ${accept}`}
+              {!isResolvingAppId && maxSize && ` • Max size: ${Math.round(maxSize / 1024 / 1024)}MB`}
+              {!isResolvingAppId && multiple && ' • Multiple files allowed'}
+            </div>
+          </div>
+        )}
+        
+        {isUploading && !showProgress && (
+          <div className="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main-500"></div>
           </div>
         )}
       </div>
 
-      {/* Selected files */}
-      {selectedFiles.length > 0 && (
-        <div className="file-upload__files">
-          <h4 className="file-upload__files-title">Selected Files:</h4>
-          <ul className="file-upload__files-list">
-            {selectedFiles.map((file, index) => (
-              <li key={index} className="file-upload__file-item">
-                <span className="file-upload__file-name">{file.name}</span>
-                <span className="file-upload__file-size">{formatFileSize(file.size)}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
+      {/* Upload Progress List */}
+      {showProgress && uploadStates.size > 0 && (
+        <div className="space-y-2">
+          {Array.from(uploadStates.entries()).map(([fileId, uploadState]) => {
+            const { file, progress, preview, result } = uploadState;
+            const isError = progress.status === 'error';
+            const isCompleted = progress.status === 'completed';
+            const isUploading = progress.status === 'uploading' || progress.status === 'processing';
 
-      {/* Validation errors */}
-      {validationErrors.length > 0 && (
-        <Alert variant="destructive" className="file-upload__errors">
-          <ul>
-            {validationErrors.map((error, index) => (
-              <li key={index}>{error}</li>
-            ))}
-          </ul>
-        </Alert>
-      )}
+            return (
+              <div
+                key={fileId}
+                className={`flex items-center space-x-3 p-3 rounded-lg border ${
+                  isError 
+                    ? 'bg-acc-50 border-acc-200' 
+                    : isCompleted 
+                    ? 'bg-success-50 border-success-200'
+                    : 'bg-sec-50 border-sec-200'
+                }`}
+              >
+                {/* Preview/Icon */}
+                <div className="flex-shrink-0">
+                  {preview ? (
+                    <img
+                      src={preview}
+                      alt={file.name}
+                      className="w-12 h-12 object-cover rounded"
+                    />
+                  ) : (
+                    <div className="w-12 h-12 flex items-center justify-center bg-sec-200 rounded">
+                      <span className="text-2xl">📄</span>
+                    </div>
+                  )}
+                </div>
 
-      {/* Upload progress */}
-      {isUploading && (
-        <div className="file-upload__progress">
-          <Progress value={uploadProgress} max={100} />
-          <p className="file-upload__progress-text">
-            Uploading... {uploadProgress}%
-          </p>
+                {/* File Info */}
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium text-sec-900 truncate">
+                    {file.name}
+                  </div>
+                  <div className="text-sm text-sec-500">
+                    {formatFileSize(file.size)}
+                    {isCompleted && result && ' • Uploaded'}
+                    {isError && progress.error && ` • ${progress.error}`}
+                  </div>
+                  
+                  {/* Progress Bar */}
+                  {showProgress && (isUploading || isError) && (
+                    <div className="mt-2">
+                      <div className="w-full bg-sec-200 rounded-full h-2">
+                        <div
+                          className={`h-2 rounded-full transition-all duration-300 ${
+                            isError ? 'bg-acc-500' : 'bg-main-500'
+                          }`}
+                          style={{ width: `${progress.percentage}%` }}
+                        />
+                      </div>
+                      {isUploading && (
+                        <div className="text-xs text-sec-500 mt-1">
+                          {progress.percentage}% • {formatFileSize(progress.loaded)} / {formatFileSize(progress.total)}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {/* Status Icon */}
+                <div className="flex-shrink-0">
+                  {isCompleted && (
+                    <span className="text-success-500 text-xl">✓</span>
+                  )}
+                  {isError && (
+                    <span className="text-acc-500 text-xl">✕</span>
+                  )}
+                  {isUploading && (
+                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-main-500"></div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
         </div>
       )}
-
-      {/* Upload error */}
-      {uploadError && (
-        <Alert variant="destructive" className="file-upload__error">
-          {uploadError}
-        </Alert>
+      
+      {appIdError && (
+        <div className="p-3 bg-acc-50 border border-acc-200 rounded-lg text-sm text-acc-600">
+          {appIdError}
+        </div>
       )}
-
-      {/* Actions */}
-      {selectedFiles.length > 0 && (
-        <div className="file-upload__actions">
-          <Button
-            onClick={handleUpload}
-            disabled={!canUpload}
-            className="file-upload__upload-btn"
-          >
-            {isUploading ? 'Uploading...' : `Upload ${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''}`}
-          </Button>
-          <Button
-            variant="outline"
-            onClick={handleClear}
-            disabled={isUploading}
-            className="file-upload__clear-btn"
-          >
-            Clear
-          </Button>
+      {error && (
+        <div className="p-3 bg-acc-50 border border-acc-200 rounded-lg text-sm text-acc-600">
+          {error}
         </div>
       )}
     </div>
   );
 }
+
+