File Upload

npx nocta-ui add file-upload

import { FileUpload } from '@/components/ui/file-upload';

// Images only
<FileUpload accept="image/*" />

// Specific image types
<FileUpload accept="image/jpeg,image/png,image/gif" />

// Documents
<FileUpload accept=".pdf,.doc,.docx,.txt" />

// Multiple types
<FileUpload accept="image/*,.pdf,.doc,.docx,text/*" />

// All files
<FileUpload accept="*/*" />

// 1MB limit
<FileUpload maxSize={1024 * 1024} />

// 5MB limit
<FileUpload maxSize={5 * 1024 * 1024} />

// 50MB limit
<FileUpload maxSize={50 * 1024 * 1024} />

// Single file only
<FileUpload multiple={false} />

// Up to 5 files
<FileUpload multiple maxFiles={5} />

// Up to 20 files
<FileUpload multiple maxFiles={20} />

// Unlimited files
<FileUpload multiple />

const handleUpload = async (filesToUpload: FileUploadFile[]) => {
  for (const fileData of filesToUpload) {
    const formData = new FormData();
    formData.append('file', fileData.file);
    
    try {
      // Update status to uploading
      setFiles(prevFiles => 
        prevFiles.map(f => 
          f.id === fileData.id 
            ? { ...f, status: 'uploading', progress: 0 }
            : f
        )
      );

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

      if (response.ok) {
        // Success
        setFiles(prevFiles => 
          prevFiles.map(f => 
            f.id === fileData.id 
              ? { ...f, status: 'success', progress: 100 }
              : f
          )
        );
      } else {
        throw new Error('Upload failed');
      }
    } catch (error) {
      // Error
      setFiles(prevFiles => 
        prevFiles.map(f => 
          f.id === fileData.id 
            ? { ...f, status: 'error', error: 'Upload failed' }
            : f
        )
      );
    }
  }
};

const handleUploadWithProgress = async (filesToUpload: FileUploadFile[]) => {
  for (const fileData of filesToUpload) {
    const formData = new FormData();
    formData.append('file', fileData.file);
    
    try {
      setFiles(prevFiles => 
        prevFiles.map(f => 
          f.id === fileData.id 
            ? { ...f, status: 'uploading', progress: 0 }
            : f
        )
      );

      await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        
        // Track upload progress
        xhr.upload.addEventListener('progress', (e) => {
          if (e.lengthComputable) {
            const progress = (e.loaded / e.total) * 100;
            setFiles(prevFiles => 
              prevFiles.map(f => 
                f.id === fileData.id 
                  ? { ...f, progress }
                  : f
              )
            );
          }
        });

        xhr.addEventListener('load', () => {
          if (xhr.status === 200) {
            setFiles(prevFiles => 
              prevFiles.map(f => 
                f.id === fileData.id 
                  ? { ...f, status: 'success', progress: 100 }
                  : f
              )
            );
            resolve(xhr.response);
          } else {
            reject(new Error('Upload failed'));
          }
        });

        xhr.addEventListener('error', () => {
          reject(new Error('Upload failed'));
        });

        xhr.open('POST', '/api/upload');
        xhr.send(formData);
      });
    } catch (error) {
      setFiles(prevFiles => 
        prevFiles.map(f => 
          f.id === fileData.id 
            ? { ...f, status: 'error', error: 'Upload failed' }
            : f
        )
      );
    }
  }
};