@jmruthers/pace-core 0.5.101 → 0.5.103

package/src/components/FileDisplay/FileDisplay.tsx

@@ -1,26 +1,50 @@
 import React, { useState, useEffect, useCallback, useRef, useContext, useMemo } from 'react';
-import { SupabaseClient } from '@supabase/supabase-js';
 import { FileReference, FileCategory } from '../../types/file-reference';
-import { useFileReferenceForRecord, useFileReference } from '../../hooks/useFileReference';
 import { usePublicFileDisplay } from '../../hooks/public/usePublicFileDisplay';
 import { useFileDisplay } from '../../hooks/useFileDisplay';
 import { useFileUrl } from '../../hooks/useFileUrl';
-import { getPublicUrl, getSignedUrl } from '../../utils/storage/helpers';
 import { PublicPageContext, useIsPublicPage } from '../PublicLayout/PublicPageProvider';
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter } from '../Dialog/Dialog';
 import { Button } from '../Button/Button';
 
+/**
+ * Size classes for fallback display
+ */
+const fallbackSizeClasses = {
+  xs: 'h-4 w-4 text-xs',
+  sm: 'h-6 w-6 text-sm',
+  md: 'h-8 w-8 text-base',
+  lg: 'h-12 w-12 text-lg',
+  xl: 'h-16 w-16 text-xl',
+  '2xl': 'h-20 w-20 text-2xl'
+};
+
+/**
+ * Default fallback text generator - extracts initials from file name
+ */
+function defaultGenerateFallbackText(fileName?: string): string {
+  if (!fileName) return 'FL';
+  
+  // Extract initials from file name (without extension)
+  const baseName = fileName.replace(/\.[^/.]+$/, '');
+  const words = baseName.split(/[\s\-_]+/);
+  
+  if (words.length === 0) return 'FL';
+  
+  return words
+    .map(word => word.charAt(0).toUpperCase())
+    .join('')
+    .substring(0, 3); // Max 3 characters
+}
+
 export interface FileDisplayProps {
-  /** Supabase client instance. Optional when used in PublicPageProvider or UnifiedAuthProvider context */
-  supabase?: SupabaseClient;
   table_name: string;
   record_id: string;
   organisation_id: string;
   category?: FileCategory;
   /** Display only a single file instead of all files. Uses first file (prefers images) from all files, without category filtering */
   displayOnly?: boolean;
-  showUpload?: boolean;
   showDelete?: boolean;
   className?: string;
   children?: React.ReactNode;
@@ -28,6 +52,14 @@ export interface FileDisplayProps {
   loadingComponent?: React.ComponentType;
   /** Custom error component to render when an error occurs */
   errorComponent?: React.ComponentType<{ error: Error | string | null; retry?: () => void }>;
+  /** Whether to show fallback UI when no file is available or image fails to load */
+  showFallback?: boolean;
+  /** Custom function to generate fallback text from file name or other context */
+  generateFallbackText?: (fileName?: string) => string;
+  /** Explicit fallback text to display (overrides generateFallbackText) */
+  fallbackText?: string;
+  /** Size variant for fallback display (only applies when showFallback is true) */
+  fallbackSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
 // Shared rendering logic for file display
@@ -46,11 +78,13 @@ interface FileDisplayContentProps {
   children?: React.ReactNode;
   onDelete?: () => Promise<void>;
   clearError?: () => void;
-  supabase?: SupabaseClient;
   organisation_id: string;
-  loadingUrls?: Set<string>;
   loadingComponent?: React.ComponentType;
   errorComponent?: React.ComponentType<{ error: Error | string | null; retry?: () => void }>;
+  showFallback?: boolean;
+  generateFallbackText?: (fileName?: string) => string;
+  fallbackText?: string;
+  fallbackSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
 function FileDisplayContent({
@@ -68,19 +102,33 @@ function FileDisplayContent({
   children,
   onDelete,
   clearError,
-  supabase,
   organisation_id,
-  loadingUrls = new Set(),
   loadingComponent: LoadingComponent,
-  errorComponent: ErrorComponent
+  errorComponent: ErrorComponent,
+  showFallback = false,
+  generateFallbackText = defaultGenerateFallbackText,
+  fallbackText,
+  fallbackSize = 'md'
 }: FileDisplayContentProps) {
   const [imageError, setImageError] = useState(false);
   const [internalFileUrls, setInternalFileUrls] = useState<Map<string, string>>(new Map(fileUrls));
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const loadedFilesRef = useRef<Set<string>>(new Set());
-  const loadingUrlsRef = useRef<Set<string>>(new Set(loadingUrls));
   const fileReferencesRef = useRef<FileReference[]>([]);
 
+  // Compute fallback text
+  const computedFallbackText = useMemo(() => {
+    if (fallbackText) return fallbackText;
+    const fileName = fileReference?.file_metadata?.fileName;
+    return generateFallbackText(fileName);
+  }, [fallbackText, fileReference, generateFallbackText]);
+
+  // Compute fallback classes
+  const fallbackClasses = useMemo(() => {
+    const sizeClass = fallbackSizeClasses[fallbackSize];
+    const baseClasses = 'flex items-center justify-center bg-sec-100 text-sec-600 font-semibold rounded';
+    return `${baseClasses} ${sizeClass} ${className}`.trim();
+  }, [fallbackSize, className]);
+
   // Sync fileUrls prop with internal state
   useEffect(() => {
     setInternalFileUrls(new Map(fileUrls));
@@ -93,64 +141,11 @@ function FileDisplayContent({
     
     if (currentIds !== prevIds) {
       fileReferencesRef.current = fileReferences;
-      // Reset loaded files ref when file references change
-      loadedFilesRef.current.clear();
+      // Reset internal URLs when file references change
       setInternalFileUrls(new Map());
     }
   }, [fileReferences]);
 
-  // Fetch URLs for all file references (for multiple files view when not using context hooks)
-  useEffect(() => {
-    if (!supabase || category || fileReferences.length === 0) return;
-
-    const loadFileUrls = async () => {
-      // Find files that need URLs loaded
-      const urlsToLoad = fileReferences.filter(fileRef => {
-        return !loadedFilesRef.current.has(fileRef.id) && !loadingUrlsRef.current.has(fileRef.id);
-      });
-
-      if (urlsToLoad.length === 0) return;
-
-      // Mark files as loading (update both state and ref)
-      loadingUrlsRef.current = new Set([...loadingUrlsRef.current, ...urlsToLoad.map(f => f.id)]);
-
-      // Load URLs for files that need them
-      for (const fileRef of urlsToLoad) {
-        try {
-          let url: string | null = null;
-
-          if (fileRef.is_public) {
-            // Public files: generate public URL
-            url = getPublicUrl(supabase, fileRef.file_path, true);
-          } else {
-            // Private files: generate signed URL
-            const signedUrlResult = await getSignedUrl(supabase, fileRef.file_path, {
-              appName: 'file-reference',
-              orgId: organisation_id,
-              expiresIn: 3600
-            });
-            url = signedUrlResult?.url || null;
-          }
-
-          if (url) {
-            setInternalFileUrls(prev => {
-              const updated = new Map(prev);
-              updated.set(fileRef.id, url!);
-              return updated;
-            });
-            loadedFilesRef.current.add(fileRef.id);
-          }
-        } catch (error) {
-          console.error(`Failed to load URL for file ${fileRef.id}:`, error);
-        } finally {
-          loadingUrlsRef.current.delete(fileRef.id);
-        }
-      }
-    };
-
-    loadFileUrls();
-  }, [category, fileReferences.map(f => f.id).join(','), supabase, organisation_id]);
-
   const handleDeleteClick = () => {
     setDeleteDialogOpen(true);
   };
@@ -163,8 +158,28 @@ function FileDisplayContent({
     setImageError(false);
   };
 
-  const handleImageError = () => {
+  const handleImageError = (e?: React.SyntheticEvent<HTMLImageElement>) => {
     setImageError(true);
+    
+    // If fallback is enabled, show fallback UI when image fails to load
+    if (showFallback && e) {
+      const target = e.target as HTMLImageElement;
+      target.style.display = 'none';
+      
+      // Check if fallback already exists
+      if (target.nextSibling && (target.nextSibling as HTMLElement).className.includes('bg-sec-100')) {
+        return; // Fallback already shown
+      }
+      
+      // Create fallback element
+      const fallback = document.createElement('div');
+      fallback.className = fallbackClasses;
+      fallback.textContent = computedFallbackText;
+      fallback.title = fileReference?.file_metadata?.fileName || 'File';
+      
+      // Insert fallback after the image
+      target.parentNode?.insertBefore(fallback, target.nextSibling);
+    }
   };
 
   const getFileIcon = (fileType: string) => {
@@ -186,6 +201,37 @@ function FileDisplayContent({
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   };
 
+  // Show fallback immediately if enabled and we have no files (even during loading)
+  // This provides better UX by showing fallback UI instead of a spinner when we know there are no files
+  if (fileCount === 0 && !isLoading) {
+    // Show fallback if enabled
+    if (showFallback) {
+      return (
+        <div className={fallbackClasses} title="No file">
+          {computedFallbackText}
+          {children}
+        </div>
+      );
+    }
+    
+    return (
+      <div className={`text-sec-500 text-center p-4 ${className}`}>
+        No files found
+        {children}
+      </div>
+    );
+  }
+
+  // During loading, show fallback if enabled (better UX than spinner for empty states)
+  if (isLoading && showFallback && fileCount === 0) {
+    return (
+      <div className={fallbackClasses} title="Loading...">
+        {computedFallbackText}
+        {children}
+      </div>
+    );
+  }
+
   if (isLoading) {
     if (LoadingComponent) {
       return <LoadingComponent />;
@@ -201,6 +247,16 @@ function FileDisplayContent({
     if (ErrorComponent) {
       return <ErrorComponent error={error} retry={clearError} />;
     }
+    
+    // Show fallback if enabled
+    if (showFallback) {
+      return (
+        <div className={fallbackClasses} title="File unavailable">
+          {computedFallbackText}
+        </div>
+      );
+    }
+    
     return (
       <div className={`p-4 bg-acc-50 border border-acc-200 rounded-lg ${className}`}>
         <div className="text-acc-600">
@@ -218,21 +274,21 @@ function FileDisplayContent({
     );
   }
 
-  if (fileCount === 0) {
-    return (
-      <div className={`text-sec-500 text-center p-4 ${className}`}>
-        No files found
-        {children}
-      </div>
-    );
-  }
-
   // Single file display (when category or displayOnly is specified)
   if ((category || displayOnly) && fileReference) {
     const isImage = fileReference.file_metadata.fileType?.startsWith('image/');
     
     // Simplified image-only display when displayOnly is true and it's an image
-    if (displayOnly && isImage && !imageError && !showDelete) {
+    if (displayOnly && isImage && !showDelete) {
+      // Show fallback if image error occurred and fallback is enabled
+      if (imageError && showFallback) {
+        return (
+          <div className={fallbackClasses} title={fileReference.file_metadata.fileName || 'File'}>
+            {computedFallbackText}
+          </div>
+        );
+      }
+      
       // Show loading skeleton if URL is not available yet
       if (!fileUrl) {
         return (
@@ -243,6 +299,7 @@ function FileDisplayContent({
           </div>
         );
       }
+      
       return (
         <img
           src={fileUrl}
@@ -254,6 +311,15 @@ function FileDisplayContent({
     }
     
     // Standard single file display with wrapper
+    // For displayOnly mode, if fallback is enabled and there's no URL or image error, show fallback instead of folder icon
+    if (displayOnly && showFallback && (!fileUrl || imageError || !isImage)) {
+      return (
+        <div className={fallbackClasses} title={fileReference.file_metadata.fileName || 'File'}>
+          {computedFallbackText}
+        </div>
+      );
+    }
+    
     return (
       <div className={`space-y-2 ${className}`}>
         {isImage && fileUrl && !imageError ? (
@@ -295,6 +361,11 @@ function FileDisplayContent({
               </>
             )}
           </div>
+        ) : isImage && imageError && showFallback ? (
+          // Show fallback when image fails to load and fallback is enabled
+          <div className={fallbackClasses} title={fileReference.file_metadata.fileName || 'File'}>
+            {computedFallbackText}
+          </div>
         ) : (
           <div className="flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200">
             <span className="text-2xl">
@@ -352,16 +423,11 @@ function FileDisplayContent({
       {fileReferences.map((fileRef) => {
         const isImage = fileRef.file_metadata.fileType?.startsWith('image/');
         const fileUrl = internalFileUrls.get(fileRef.id) || null;
-        const isLoadingUrl = loadingUrlsRef.current.has(fileRef.id);
         const canDownload = !isImage && fileUrl;
         
         return (
           <div key={fileRef.id} className="flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200">
-            {isLoadingUrl ? (
-              <div className="w-12 h-12 flex items-center justify-center bg-sec-100 rounded animate-pulse">
-                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-main-500"></div>
-              </div>
-            ) : isImage && fileUrl ? (
+            {isImage && fileUrl ? (
               <img
                 src={fileUrl}
                 alt={fileRef.file_metadata.fileName || 'File'}
@@ -413,181 +479,6 @@ function FileDisplayContent({
   );
 }
 
-/**
- * Internal component for backwards compatibility (when supabase is explicitly provided)
- */
-function FileDisplayBackwardsCompat({
-  supabase,
-  table_name,
-  record_id,
-  organisation_id,
-  category,
-  displayOnly = false,
-  showUpload = false,
-  showDelete = false,
-  className = '',
-  children,
-  loadingComponent,
-  errorComponent
-}: Required<Pick<FileDisplayProps, 'supabase'>> & Omit<FileDisplayProps, 'supabase'>) {
-  const {
-    isLoading: isLoadingForRecord,
-    error: errorForRecord,
-    fileUrl,
-    fileReference,
-    fileReferences,
-    fileCount,
-    loadFileReference,
-    loadFileUrl,
-    loadFileReferences,
-    loadFileCount,
-    deleteFile,
-    clearError
-  } = useFileReferenceForRecord(supabase, table_name, record_id, organisation_id);
-
-  // Use useFileReference to get getFilesByCategory when category is provided
-  const {
-    getFilesByCategory,
-    isLoading: isLoadingCategory,
-    error: errorCategory
-  } = useFileReference(supabase);
-
-  // Consolidated state for category mode
-  const [categoryFileReferences, setCategoryFileReferences] = useState<FileReference[]>([]);
-  const categoryFileReference = categoryFileReferences[0] || null;
-  const categoryFileUrlHook = useFileUrl(categoryFileReference, {
-    supabase,
-    organisation_id,
-    autoLoad: !!categoryFileReference
-  });
-
-  // Consolidated state for displayOnly mode
-  const [displayOnlyFileReference, setDisplayOnlyFileReference] = useState<FileReference | null>(null);
-  const displayOnlyFileUrlHook = useFileUrl(displayOnlyFileReference, {
-    supabase,
-    organisation_id,
-    autoLoad: !!displayOnlyFileReference
-  });
-
-  // Load files by category when category is provided
-  useEffect(() => {
-    if (category) {
-      const loadCategoryFiles = async () => {
-        try {
-          const files = await getFilesByCategory(table_name, record_id, category, organisation_id);
-          setCategoryFileReferences(files);
-          
-          // URL generation is handled by useFileUrl hook
-          if (files.length === 0) {
-            setCategoryFileReferences([]);
-          }
-        } catch (err) {
-          console.error('[FileDisplayBackwardsCompat] Error loading files by category:', err);
-        }
-      };
-      
-      loadCategoryFiles();
-    } else {
-      // Clear category files when no category
-      setCategoryFileReferences([]);
-    }
-  }, [category, table_name, record_id, organisation_id, supabase, getFilesByCategory]);
-
-  // Load file data on mount (when no category)
-  useEffect(() => {
-    if (!category) {
-      loadFileCount();
-      loadFileReferences();
-    }
-  }, [loadFileCount, loadFileReferences, category]);
-
-  // Load file URL when file reference is available (when no category)
-  useEffect(() => {
-    if (!category && fileReference) {
-      loadFileUrl();
-    }
-  }, [category, fileReference, loadFileUrl]);
-
-  // Handle displayOnly mode: select first file (prefer images) from all files
-  useEffect(() => {
-    if (displayOnly && !category && fileReferences.length > 0) {
-      // Prefer image files
-      const imageFiles = fileReferences.filter(f => 
-        f.file_metadata.fileType?.startsWith('image/')
-      );
-      const targetFile = imageFiles.length > 0 ? imageFiles[0] : fileReferences[0];
-      setDisplayOnlyFileReference(targetFile);
-      // URL generation is handled by useFileUrl hook
-    } else {
-      // Clear displayOnly files when not in displayOnly mode or when category is specified
-      setDisplayOnlyFileReference(null);
-    }
-  }, [displayOnly, category, fileReferences]);
-
-  const handleDelete = async () => {
-    await deleteFile(true);
-  };
-
-  // Determine final file reference and URL based on mode
-  // Priority: category > displayOnly > default (all files)
-  let finalFileReference: FileReference | null = null;
-  let finalFileUrl: string | null = null;
-  let finalFileReferences: FileReference[] = [];
-  let finalFileCount = 0;
-  let finalIsLoading = false;
-  let finalError: string | Error | null = null;
-
-  if (category) {
-    // Category mode: use category-filtered files
-    finalFileReference = categoryFileReference;
-    finalFileUrl = categoryFileUrlHook.url;
-    finalFileReferences = categoryFileReferences;
-    finalFileCount = categoryFileReferences.length;
-    finalIsLoading = isLoadingCategory || categoryFileUrlHook.isLoading;
-    finalError = errorCategory || categoryFileUrlHook.error;
-  } else if (displayOnly) {
-    // DisplayOnly mode: use first file from all files (prefers images)
-    finalFileReference = displayOnlyFileReference;
-    finalFileUrl = displayOnlyFileUrlHook.url;
-    finalFileReferences = displayOnlyFileReference ? [displayOnlyFileReference] : [];
-    finalFileCount = displayOnlyFileReference ? 1 : 0;
-    finalIsLoading = isLoadingForRecord || displayOnlyFileUrlHook.isLoading;
-    finalError = errorForRecord || displayOnlyFileUrlHook.error;
-  } else {
-    // Default mode: show all files
-    finalFileReference = fileReference;
-    finalFileUrl = fileUrl;
-    finalFileReferences = fileReferences;
-    finalFileCount = fileCount;
-    finalIsLoading = isLoadingForRecord;
-    finalError = errorForRecord;
-  }
-
-  return (
-    <FileDisplayContent
-      isLoading={finalIsLoading}
-      error={finalError}
-      fileUrl={finalFileUrl}
-      fileReference={finalFileReference}
-      fileReferences={finalFileReferences}
-      fileUrls={new Map()} // Will be populated by FileDisplayContent's useEffect
-      fileCount={finalFileCount}
-      category={category}
-      displayOnly={displayOnly}
-      showDelete={showDelete}
-      className={className}
-      children={children}
-      onDelete={handleDelete}
-      clearError={clearError}
-      supabase={supabase}
-      organisation_id={organisation_id}
-      loadingUrls={new Set()}
-      loadingComponent={loadingComponent}
-      errorComponent={errorComponent}
-    />
-  );
-}
-
 /**
  * Internal component for public page context
  * Uses PublicPageContext to get Supabase client
@@ -598,13 +489,16 @@ function FileDisplayPublic({
   organisation_id,
   category,
   displayOnly = false,
-  showUpload = false,
   showDelete = false,
   className = '',
   children,
   loadingComponent,
-  errorComponent
-}: Omit<FileDisplayProps, 'supabase'>) {
+  errorComponent,
+  showFallback,
+  generateFallbackText,
+  fallbackText,
+  fallbackSize
+}: FileDisplayProps) {
   const publicPageContext = useContext(PublicPageContext);
   const supabase = publicPageContext?.supabase ?? null;
 
@@ -633,9 +527,9 @@ function FileDisplayPublic({
     { supabase }
   );
 
-  // Note: Public context doesn't support delete operations
+  // Public context doesn't support delete operations
   const handleDelete = async () => {
-    console.warn('[FileDisplay] Delete operation not supported in public context');
+    // Delete operations are not available in public context for security reasons
   };
 
   // Handle displayOnly mode: select first file (prefer images) from all files
@@ -673,10 +567,13 @@ function FileDisplayPublic({
       className={className}
       children={children}
       onDelete={showDelete ? handleDelete : undefined}
-      supabase={supabase}
       organisation_id={organisation_id}
       loadingComponent={loadingComponent}
       errorComponent={errorComponent}
+      showFallback={showFallback}
+      generateFallbackText={generateFallbackText}
+      fallbackText={fallbackText}
+      fallbackSize={fallbackSize}
     />
   );
 }
@@ -691,13 +588,16 @@ function FileDisplayAuthenticated({
   organisation_id,
   category,
   displayOnly = false,
-  showUpload = false,
   showDelete = false,
   className = '',
   children,
   loadingComponent,
-  errorComponent
-}: Omit<FileDisplayProps, 'supabase'>) {
+  errorComponent,
+  showFallback,
+  generateFallbackText,
+  fallbackText,
+  fallbackSize
+}: FileDisplayProps) {
   const { supabase } = useUnifiedAuth();
 
   if (!supabase) {
@@ -756,10 +656,9 @@ function FileDisplayAuthenticated({
     }
   }, [displayOnly, category, fileReferences, fileUrls]);
 
-  // Note: Delete would need to be implemented via FileReferenceService
-  // For now, we'll show a warning
+  // Delete operation - implementation pending
   const handleDelete = async () => {
-    console.warn('[FileDisplay] Delete operation needs to be implemented via FileReferenceService');
+    // TODO: Implement delete via FileReferenceService when delete functionality is needed
   };
 
   // Determine final file reference and URL based on mode
@@ -798,10 +697,13 @@ function FileDisplayAuthenticated({
       className={className}
       children={children}
       onDelete={showDelete ? handleDelete : undefined}
-      supabase={supabase}
       organisation_id={organisation_id}
       loadingComponent={loadingComponent}
       errorComponent={errorComponent}
+      showFallback={showFallback}
+      generateFallbackText={generateFallbackText}
+      fallbackText={fallbackText}
+      fallbackSize={fallbackSize}
     />
   );
 }
@@ -812,8 +714,7 @@ function FileDisplayAuthenticated({
  * This component is context-aware and automatically detects whether it's being used
  * in a public or authenticated context. It fetches and displays files from storage.
  * 
- * When `supabase` prop is provided, it uses the explicit client (backwards compatible).
- * When `supabase` prop is not provided, it automatically detects context and uses:
+ * The component automatically detects context and uses:
  * - PublicPageProvider context for public pages
  * - UnifiedAuthProvider context for authenticated pages
  * 
@@ -823,39 +724,21 @@ function FileDisplayAuthenticated({
  * @returns React element with file display
  */
 export function FileDisplay({
-  supabase,
   table_name,
   record_id,
   organisation_id,
   category,
   displayOnly = false,
-  showUpload = false,
   showDelete = false,
   className = '',
   children,
   loadingComponent,
-  errorComponent
+  errorComponent,
+  showFallback,
+  generateFallbackText,
+  fallbackText,
+  fallbackSize
 }: FileDisplayProps) {
-  // If supabase is explicitly provided, use backwards compatible mode
-  if (supabase) {
-    return (
-      <FileDisplayBackwardsCompat
-        supabase={supabase}
-        table_name={table_name}
-        record_id={record_id}
-        organisation_id={organisation_id}
-        category={category}
-        displayOnly={displayOnly}
-        showUpload={showUpload}
-        showDelete={showDelete}
-        className={className}
-        children={children}
-        loadingComponent={loadingComponent}
-        errorComponent={errorComponent}
-      />
-    );
-  }
-
   // Check which context we're in and route to the appropriate component
   const isPublicPage = useIsPublicPage();
   
@@ -868,17 +751,20 @@ export function FileDisplay({
         organisation_id={organisation_id}
         category={category}
         displayOnly={displayOnly}
-        showUpload={showUpload}
         showDelete={showDelete}
         className={className}
         children={children}
         loadingComponent={loadingComponent}
         errorComponent={errorComponent}
+        showFallback={showFallback}
+        generateFallbackText={generateFallbackText}
+        fallbackText={fallbackText}
+        fallbackSize={fallbackSize}
       />
     );
   }
 
-  // Otherwise, try to use the authenticated component
+  // Otherwise, use the authenticated component
   // It will show an error if not in UnifiedAuthProvider
   return (
     <FileDisplayAuthenticated
@@ -887,12 +773,15 @@ export function FileDisplay({
       organisation_id={organisation_id}
       category={category}
       displayOnly={displayOnly}
-      showUpload={showUpload}
       showDelete={showDelete}
       className={className}
       children={children}
       loadingComponent={loadingComponent}
       errorComponent={errorComponent}
+      showFallback={showFallback}
+      generateFallbackText={generateFallbackText}
+      fallbackText={fallbackText}
+      fallbackSize={fallbackSize}
     />
   );
 }