📤 Lesson 7.4: File Uploads in React

📚 Multiple File Uploads

So far, we've focused on single file uploads. But what if users need to upload multiple files at once? Maybe they're uploading a photo album, multiple documents, or product images. Let's learn how to handle multiple file selections and display previews for each one.

Enabling Multiple File Selection

The HTML file input supports multiple file selection with the multiple attribute:

<input type="file" multiple accept="image/*" />

When multiple is present, users can select multiple files from the file picker (usually by holding Ctrl/Cmd or Shift). The event.target.files will then contain a FileList with all selected files.

Converting FileList to Array

Since FileList is array-like but not a true array, we need to convert it to use array methods:

// Method 1: Array.from()
const filesArray = Array.from(event.target.files || []);

// Method 2: Spread operator
const filesArray = [...(event.target.files || [])];

// Method 3: Array.prototype.slice.call() (older approach)
const filesArray = Array.prototype.slice.call(event.target.files || []);

Basic Multiple File Upload Component

import React, { useState } from 'react';

interface FileWithPreview {
  file: File;
  preview: string;
  id: string;
}

const MultipleFileUpload: React.FC = () => {
  const [files, setFiles] = useState<FileWithPreview[]>([]);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = event.target.files;
    
    if (!selectedFiles || selectedFiles.length === 0) {
      return;
    }

    // Convert FileList to array
    const filesArray = Array.from(selectedFiles);

    // Filter for images only
    const imageFiles = filesArray.filter(file => 
      file.type.startsWith('image/')
    );

    if (imageFiles.length === 0) {
      alert('Please select at least one image file');
      return;
    }

    // Create preview URLs for each file
    const filesWithPreviews: FileWithPreview[] = imageFiles.map(file => ({
      file,
      preview: URL.createObjectURL(file),
      id: `${file.name}-${Date.now()}-${Math.random()}`
    }));

    setFiles(filesWithPreviews);
  };

  const removeFile = (id: string) => {
    setFiles(prevFiles => {
      // Find the file to remove
      const fileToRemove = prevFiles.find(f => f.id === id);
      
      // Revoke its object URL to free memory
      if (fileToRemove) {
        URL.revokeObjectURL(fileToRemove.preview);
      }
      
      // Return filtered array
      return prevFiles.filter(f => f.id !== id);
    });
  };

  const clearAll = () => {
    // Revoke all object URLs
    files.forEach(f => URL.revokeObjectURL(f.preview));
    setFiles([]);
  };

  // Cleanup on unmount
  React.useEffect(() => {
    return () => {
      // Revoke all object URLs when component unmounts
      files.forEach(f => URL.revokeObjectURL(f.preview));
    };
  }, [files]);

  return (
    <div>
      <h3>Upload Multiple Images</h3>
      
      <input
        type="file"
        multiple
        accept="image/*"
        onChange={handleFileChange}
      />

      {files.length > 0 && (
        <div style={{ marginTop: '1rem' }}>
          <div style={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center',
            marginBottom: '1rem'
          }}>
            <h4>Selected Files: {files.length}</h4>
            <button onClick={clearAll}>Clear All</button>
          </div>

          <div style={{ 
            display: 'grid', 
            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
            gap: '1rem'
          }}>
            {files.map((fileItem) => (
              <div 
                key={fileItem.id}
                style={{
                  border: '2px solid #ddd',
                  borderRadius: '8px',
                  padding: '0.5rem',
                  position: 'relative'
                }}
              >
                <img 
                  src={fileItem.preview} 
                  alt={fileItem.file.name}
                  style={{
                    width: '100%',
                    height: '150px',
                    objectFit: 'cover',
                    borderRadius: '4px'
                  }}
                />
                <p style={{ 
                  fontSize: '0.875rem', 
                  marginTop: '0.5rem',
                  wordBreak: 'break-word'
                }}>
                  {fileItem.file.name}
                </p>
                <p style={{ fontSize: '0.75rem', color: '#666' }}>
                  {(fileItem.file.size / 1024).toFixed(2)} KB
                </p>
                <button 
                  onClick={() => removeFile(fileItem.id)}
                  style={{
                    width: '100%',
                    marginTop: '0.5rem',
                    padding: '0.25rem',
                    backgroundColor: '#f44336',
                    color: 'white',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer'
                  }}
                >
                  Remove
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default MultipleFileUpload;

Validating Multiple Files

When handling multiple files, you'll want to validate each one individually and provide feedback:

interface ValidationError {
  fileName: string;
  error: string;
}

const handleMultipleFileValidation = async (
  files: File[],
  rules: FileValidationRules
): Promise<{
  validFiles: File[];
  errors: ValidationError[];
}> => {
  const validFiles: File[] = [];
  const errors: ValidationError[] = [];

  // Validate each file
  for (const file of files) {
    const result = await validateFile(file, rules);
    
    if (result.valid) {
      validFiles.push(file);
    } else {
      errors.push({
        fileName: file.name,
        error: result.errors.join(', ')
      });
    }
  }

  return { validFiles, errors };
};

// Usage in component
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
  const selectedFiles = event.target.files;
  if (!selectedFiles || selectedFiles.length === 0) return;

  const filesArray = Array.from(selectedFiles);

  // Validate all files
  const { validFiles, errors } = await handleMultipleFileValidation(
    filesArray,
    {
      allowedTypes: ['image/jpeg', 'image/png', 'image/webp'],
      maxSizeInMB: 5,
      imageConstraints: {
        minWidth: 800,
        minHeight: 600
      }
    }
  );

  // Show errors if any
  if (errors.length > 0) {
    const errorMessage = errors
      .map(e => `${e.fileName}: ${e.error}`)
      .join('\n');
    alert(`Some files were invalid:\n\n${errorMessage}`);
  }

  // Process valid files
  if (validFiles.length > 0) {
    const filesWithPreviews = validFiles.map(file => ({
      file,
      preview: URL.createObjectURL(file),
      id: `${file.name}-${Date.now()}-${Math.random()}`
    }));

    setFiles(filesWithPreviews);
  }
};

Limiting the Number of Files

const MAX_FILES = 10;

const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const selectedFiles = event.target.files;
  if (!selectedFiles || selectedFiles.length === 0) return;

  // Check file count limit
  if (selectedFiles.length > MAX_FILES) {
    alert(`You can only upload up to ${MAX_FILES} files at once`);
    return;
  }

  // Also check total count if adding to existing files
  if (files.length + selectedFiles.length > MAX_FILES) {
    alert(
      `You already have ${files.length} files. ` +
      `You can only upload ${MAX_FILES - files.length} more.`
    );
    return;
  }

  // Process files...
};

Adding Files Instead of Replacing

Sometimes users want to add more files to their existing selection rather than replacing it:

const addMoreFiles = (event: React.ChangeEvent<HTMLInputElement>) => {
  const selectedFiles = event.target.files;
  if (!selectedFiles || selectedFiles.length === 0) return;

  const filesArray = Array.from(selectedFiles);
  
  // Filter for images
  const imageFiles = filesArray.filter(file => file.type.startsWith('image/'));

  // Create new previews
  const newFilesWithPreviews = imageFiles.map(file => ({
    file,
    preview: URL.createObjectURL(file),
    id: `${file.name}-${Date.now()}-${Math.random()}`
  }));

  // Add to existing files (not replace)
  setFiles(prevFiles => [...prevFiles, ...newFilesWithPreviews]);
};

🎯 Drag and Drop Basics

Drag and drop provides a more intuitive user experience than clicking a file input button. Users can simply drag files from their file explorer and drop them onto your component. Let's learn how to implement this powerful feature!

Understanding Drag and Drop Events

The HTML Drag and Drop API provides several events for the drop zone (the area where users drop files):

const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
  e.preventDefault(); // ← Essential!
};

Basic Drag and Drop Implementation

import React, { useState } from 'react';

const BasicDragDrop: React.FC = () => {
  const [isDragging, setIsDragging] = useState(false);
  const [files, setFiles] = useState<File[]>([]);

  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);

    // Get dropped files
    const droppedFiles = e.dataTransfer.files;
    
    if (droppedFiles && droppedFiles.length > 0) {
      const filesArray = Array.from(droppedFiles);
      setFiles(filesArray);
    }
  };

  return (
    <div>
      <h3>Drag and Drop File Upload</h3>
      
      <div
        onDragEnter={handleDragEnter}
        onDragLeave={handleDragLeave}
        onDragOver={handleDragOver}
        onDrop={handleDrop}
        style={{
          border: isDragging 
            ? '3px dashed #667eea' 
            : '2px dashed #ccc',
          borderRadius: '8px',
          padding: '2rem',
          textAlign: 'center',
          backgroundColor: isDragging 
            ? '#f0f4ff' 
            : '#fafafa',
          transition: 'all 0.3s ease',
          cursor: 'pointer'
        }}
      >
        {isDragging ? (
          <p style={{ fontSize: '1.2rem', color: '#667eea' }}>
            📥 Drop files here...
          </p>
        ) : (
          <div>
            <p style={{ fontSize: '1.2rem' }}>
              📂 Drag and drop files here
            </p>
            <p style={{ color: '#666' }}>
              or click to browse
            </p>
          </div>
        )}
      </div>

      {files.length > 0 && (
        <div style={{ marginTop: '1rem' }}>
          <h4>Selected Files:</h4>
          <ul>
            {files.map((file, index) => (
              <li key={index}>
                {file.name} - {(file.size / 1024).toFixed(2)} KB
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default BasicDragDrop;

Combining File Input with Drag and Drop

Best practice is to support both methods—drag and drop AND the traditional file input—so users can choose their preferred method:

const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
  const selectedFiles = e.target.files;
  if (selectedFiles && selectedFiles.length > 0) {
    const filesArray = Array.from(selectedFiles);
    setFiles(filesArray);
  }
};

return (
  <div
    onDragEnter={handleDragEnter}
    onDragLeave={handleDragLeave}
    onDragOver={handleDragOver}
    onDrop={handleDrop}
    onClick={() => fileInputRef.current?.click()}
    style={{ /* drop zone styles */ }}
  >
    <input
      ref={fileInputRef}
      type="file"
      multiple
      accept="image/*"
      onChange={handleFileInput}
      style={{ display: 'none' }}
    />
    
    <p>Drag and drop files or click to browse</p>
  </div>
);

Handling dragenter/dragleave Issues

One common issue with drag and drop is that dragleave fires when the mouse enters child elements inside your drop zone, causing flickering. Here's a robust solution using a counter:

const DragDropFixed: React.FC = () => {
  const [dragCounter, setDragCounter] = useState(0);
  const isDragging = dragCounter > 0;

  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setDragCounter(prev => prev + 1);
  };

  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setDragCounter(prev => prev - 1);
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setDragCounter(0); // Reset counter

    const droppedFiles = e.dataTransfer.files;
    // Process files...
  };

  return (
    <div
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDragOver={handleDragOver}
      onDrop={handleDrop}
      style={{
        border: isDragging ? '3px dashed #667eea' : '2px dashed #ccc',
        // ... other styles
      }}
    >
      {/* Drop zone content */}
    </div>
  );
};

🎨 Complete Drag and Drop Component

Let's put everything together into a production-ready drag-and-drop file upload component with previews, validation, and both drag-drop and click-to-browse functionality:

import React, { useState, useRef, useEffect } from 'react';

interface FileWithPreview {
  file: File;
  preview: string;
  id: string;
}

interface DragDropUploadProps {
  maxFiles?: number;
  maxSizeInMB?: number;
  acceptedTypes?: string[];
  onFilesChange?: (files: File[]) => void;
}

const DragDropUpload: React.FC<DragDropUploadProps> = ({
  maxFiles = 10,
  maxSizeInMB = 5,
  acceptedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
  onFilesChange
}) => {
  const [files, setFiles] = useState<FileWithPreview[]>([]);
  const [dragCounter, setDragCounter] = useState(0);
  const [errors, setErrors] = useState<string[]>([]);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const isDragging = dragCounter > 0;

  // Cleanup object URLs on unmount
  useEffect(() => {
    return () => {
      files.forEach(f => URL.revokeObjectURL(f.preview));
    };
  }, [files]);

  // Notify parent of file changes
  useEffect(() => {
    if (onFilesChange) {
      onFilesChange(files.map(f => f.file));
    }
  }, [files, onFilesChange]);

  const validateAndProcessFiles = (newFiles: File[]) => {
    const validationErrors: string[] = [];
    const validFiles: File[] = [];

    // Check total file count
    if (files.length + newFiles.length > maxFiles) {
      validationErrors.push(
        `Maximum ${maxFiles} files allowed. ` +
        `You have ${files.length} and tried to add ${newFiles.length}.`
      );
      setErrors(validationErrors);
      return;
    }

    // Validate each file
    newFiles.forEach(file => {
      // Check file type
      if (!acceptedTypes.includes(file.type)) {
        validationErrors.push(
          `${file.name}: Invalid file type. ` +
          `Accepted types: ${acceptedTypes.join(', ')}`
        );
        return;
      }

      // Check file size
      const sizeInMB = file.size / (1024 * 1024);
      if (sizeInMB > maxSizeInMB) {
        validationErrors.push(
          `${file.name}: File too large (${sizeInMB.toFixed(2)}MB). ` +
          `Maximum size: ${maxSizeInMB}MB`
        );
        return;
      }

      validFiles.push(file);
    });

    // Update errors
    setErrors(validationErrors);

    // Add valid files
    if (validFiles.length > 0) {
      const filesWithPreviews: FileWithPreview[] = validFiles.map(file => ({
        file,
        preview: URL.createObjectURL(file),
        id: `${file.name}-${Date.now()}-${Math.random()}`
      }));

      setFiles(prev => [...prev, ...filesWithPreviews]);
    }
  };

  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setDragCounter(prev => prev + 1);
  };

  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setDragCounter(prev => prev - 1);
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setDragCounter(0);

    const droppedFiles = e.dataTransfer.files;
    if (droppedFiles && droppedFiles.length > 0) {
      const filesArray = Array.from(droppedFiles);
      validateAndProcessFiles(filesArray);
    }
  };

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = e.target.files;
    if (selectedFiles && selectedFiles.length > 0) {
      const filesArray = Array.from(selectedFiles);
      validateAndProcessFiles(filesArray);
    }
    
    // Reset input so the same file can be selected again
    e.target.value = '';
  };

  const removeFile = (id: string) => {
    setFiles(prev => {
      const fileToRemove = prev.find(f => f.id === id);
      if (fileToRemove) {
        URL.revokeObjectURL(fileToRemove.preview);
      }
      return prev.filter(f => f.id !== id);
    });
  };

  const clearAll = () => {
    files.forEach(f => URL.revokeObjectURL(f.preview));
    setFiles([]);
    setErrors([]);
  };

  const openFilePicker = () => {
    fileInputRef.current?.click();
  };

  return (
    <div style={{ width: '100%' }}>
      {/* Drop Zone */}
      <div
        onDragEnter={handleDragEnter}
        onDragLeave={handleDragLeave}
        onDragOver={handleDragOver}
        onDrop={handleDrop}
        onClick={openFilePicker}
        style={{
          border: isDragging 
            ? '3px dashed #667eea' 
            : '2px dashed #ccc',
          borderRadius: '12px',
          padding: '3rem 2rem',
          textAlign: 'center',
          backgroundColor: isDragging 
            ? '#f0f4ff' 
            : '#fafafa',
          transition: 'all 0.3s ease',
          cursor: 'pointer',
          marginBottom: '1rem'
        }}
      >
        <input
          ref={fileInputRef}
          type="file"
          multiple
          accept={acceptedTypes.join(',')}
          onChange={handleFileInput}
          style={{ display: 'none' }}
        />

        {isDragging ? (
          <div>
            <p style={{ fontSize: '2rem', margin: 0 }}>📥</p>
            <p style={{ 
              fontSize: '1.2rem', 
              color: '#667eea',
              margin: '0.5rem 0 0 0'
            }}>
              Drop your files here
            </p>
          </div>
        ) : (
          <div>
            <p style={{ fontSize: '2rem', margin: 0 }}>📁</p>
            <p style={{ 
              fontSize: '1.2rem', 
              margin: '0.5rem 0',
              fontWeight: 500
            }}>
              Drag and drop files here
            </p>
            <p style={{ color: '#666', margin: '0.25rem 0' }}>
              or click to browse
            </p>
            <p style={{ 
              fontSize: '0.875rem', 
              color: '#999',
              margin: '1rem 0 0 0'
            }}>
              Accepted: {acceptedTypes.map(t => t.split('/')[1]).join(', ')} 
              | Max {maxSizeInMB}MB | Up to {maxFiles} files
            </p>
          </div>
        )}
      </div>

      {/* Errors */}
      {errors.length > 0 && (
        <div style={{
          backgroundColor: '#fee',
          border: '1px solid #fcc',
          borderRadius: '8px',
          padding: '1rem',
          marginBottom: '1rem'
        }}>
          <h4 style={{ margin: '0 0 0.5rem 0', color: '#c33' }}>
            ⚠️ Validation Errors:
          </h4>
          <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
            {errors.map((error, index) => (
              <li key={index} style={{ color: '#c33' }}>{error}</li>
            ))}
          </ul>
        </div>
      )}

      {/* File Preview Grid */}
      {files.length > 0 && (
        <div>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '1rem'
          }}>
            <h4 style={{ margin: 0 }}>
              Selected Files ({files.length}/{maxFiles})
            </h4>
            <button
              onClick={clearAll}
              style={{
                padding: '0.5rem 1rem',
                backgroundColor: '#f44336',
                color: 'white',
                border: 'none',
                borderRadius: '6px',
                cursor: 'pointer',
                fontSize: '0.875rem'
              }}
            >
              Clear All
            </button>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
            gap: '1rem'
          }}>
            {files.map((fileItem) => (
              <div
                key={fileItem.id}
                style={{
                  border: '2px solid #e0e0e0',
                  borderRadius: '8px',
                  padding: '0.5rem',
                  backgroundColor: 'white',
                  position: 'relative'
                }}
              >
                <img
                  src={fileItem.preview}
                  alt={fileItem.file.name}
                  style={{
                    width: '100%',
                    height: '150px',
                    objectFit: 'cover',
                    borderRadius: '6px',
                    marginBottom: '0.5rem'
                  }}
                />
                <p style={{
                  fontSize: '0.875rem',
                  margin: '0 0 0.25rem 0',
                  fontWeight: 500,
                  wordBreak: 'break-word'
                }}>
                  {fileItem.file.name}
                </p>
                <p style={{
                  fontSize: '0.75rem',
                  color: '#666',
                  margin: '0 0 0.5rem 0'
                }}>
                  {(fileItem.file.size / 1024).toFixed(2)} KB
                </p>
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    removeFile(fileItem.id);
                  }}
                  style={{
                    width: '100%',
                    padding: '0.5rem',
                    backgroundColor: '#ff5252',
                    color: 'white',
                    border: 'none',
                    borderRadius: '6px',
                    cursor: 'pointer',
                    fontSize: '0.875rem',
                    transition: 'background-color 0.2s'
                  }}
                  onMouseOver={(e) => {
                    e.currentTarget.style.backgroundColor = '#ff1744';
                  }}
                  onMouseOut={(e) => {
                    e.currentTarget.style.backgroundColor = '#ff5252';
                  }}
                >
                  Remove
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default DragDropUpload;

Using the Complete Component

import DragDropUpload from './DragDropUpload';

function App() {
  const handleFilesChange = (files: File[]) => {
    console.log('Selected files:', files);
    // Here you would typically upload these files
  };

  return (
    <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
      <h1>File Upload Demo</h1>
      
      <DragDropUpload
        maxFiles={5}
        maxSizeInMB={10}
        acceptedTypes={[
          'image/jpeg',
          'image/png',
          'image/webp',
          'image/gif'
        ]}
        onFilesChange={handleFilesChange}
      />
    </div>
  );
}

📊 Upload Progress Tracking

When uploading files, especially large ones, users need feedback about what's happening. Is the upload progressing? How much longer will it take? A progress bar provides crucial visual feedback and reassures users that the upload is working. Let's implement upload progress tracking using XMLHttpRequest or the Fetch API with streams.

Upload Progress with XMLHttpRequest

The older XMLHttpRequest API has built-in support for upload progress tracking through the progress event:

interface UploadProgress {
  fileName: string;
  progress: number; // 0-100
  loaded: number; // bytes uploaded
  total: number; // total bytes
}

const uploadFileWithProgress = (
  file: File,
  url: string,
  onProgress: (progress: UploadProgress) => void
): Promise<void> => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('file', file);

    // Track upload progress
    xhr.upload.addEventListener('progress', (e) => {
      if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        
        onProgress({
          fileName: file.name,
          progress: Math.round(percentComplete),
          loaded: e.loaded,
          total: e.total
        });
      }
    });

    // Handle completion
    xhr.addEventListener('load', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve();
      } else {
        reject(new Error(`Upload failed with status ${xhr.status}`));
      }
    });

    // Handle errors
    xhr.addEventListener('error', () => {
      reject(new Error('Upload failed due to network error'));
    });

    xhr.addEventListener('abort', () => {
      reject(new Error('Upload was cancelled'));
    });

    // Send the request
    xhr.open('POST', url);
    xhr.send(formData);
  });
};

// Usage
const handleUpload = async (file: File) => {
  try {
    await uploadFileWithProgress(
      file,
      '/api/upload',
      (progress) => {
        console.log(
          `${progress.fileName}: ${progress.progress}% ` +
          `(${progress.loaded}/${progress.total} bytes)`
        );
      }
    );
    console.log('Upload complete!');
  } catch (error) {
    console.error('Upload failed:', error);
  }
};

React Component with Upload Progress

import React, { useState } from 'react';

interface FileUploadState {
  file: File;
  progress: number;
  status: 'pending' | 'uploading' | 'success' | 'error';
  error?: string;
}

const FileUploadWithProgress: React.FC = () => {
  const [uploadStates, setUploadStates] = useState<
    Map<string, FileUploadState>
  >(new Map());

  const uploadFile = async (file: File) => {
    const fileId = `${file.name}-${Date.now()}`;

    // Initialize upload state
    setUploadStates(prev => {
      const newMap = new Map(prev);
      newMap.set(fileId, {
        file,
        progress: 0,
        status: 'uploading'
      });
      return newMap;
    });

    try {
      await uploadFileWithProgress(
        file,
        '/api/upload',
        (progressInfo) => {
          setUploadStates(prev => {
            const newMap = new Map(prev);
            const state = newMap.get(fileId);
            if (state) {
              newMap.set(fileId, {
                ...state,
                progress: progressInfo.progress
              });
            }
            return newMap;
          });
        }
      );

      // Mark as success
      setUploadStates(prev => {
        const newMap = new Map(prev);
        const state = newMap.get(fileId);
        if (state) {
          newMap.set(fileId, {
            ...state,
            status: 'success',
            progress: 100
          });
        }
        return newMap;
      });
    } catch (error) {
      // Mark as error
      setUploadStates(prev => {
        const newMap = new Map(prev);
        const state = newMap.get(fileId);
        if (state) {
          newMap.set(fileId, {
            ...state,
            status: 'error',
            error: error instanceof Error ? error.message : 'Upload failed'
          });
        }
        return newMap;
      });
    }
  };

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || files.length === 0) return;

    // Upload each file
    Array.from(files).forEach(file => {
      uploadFile(file);
    });

    // Reset input
    e.target.value = '';
  };

  return (
    <div>
      <h3>Upload Files with Progress</h3>
      
      <input
        type="file"
        multiple
        onChange={handleFileSelect}
      />

      {uploadStates.size > 0 && (
        <div style={{ marginTop: '2rem' }}>
          <h4>Uploads</h4>
          
          {Array.from(uploadStates.entries()).map(([fileId, state]) => (
            <div
              key={fileId}
              style={{
                border: '1px solid #ddd',
                borderRadius: '8px',
                padding: '1rem',
                marginBottom: '1rem'
              }}
            >
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: '0.5rem'
              }}>
                <span style={{ fontWeight: 500 }}>
                  {state.file.name}
                </span>
                <span style={{
                  fontSize: '0.875rem',
                  color: state.status === 'success' 
                    ? '#4CAF50' 
                    : state.status === 'error' 
                    ? '#f44336' 
                    : '#666'
                }}>
                  {state.status === 'uploading' && `${state.progress}%`}
                  {state.status === 'success' && '✓ Complete'}
                  {state.status === 'error' && '✗ Failed'}
                </span>
              </div>

              {/* Progress Bar */}
              <div style={{
                width: '100%',
                height: '8px',
                backgroundColor: '#e0e0e0',
                borderRadius: '4px',
                overflow: 'hidden'
              }}>
                <div style={{
                  width: `${state.progress}%`,
                  height: '100%',
                  backgroundColor: state.status === 'error' 
                    ? '#f44336' 
                    : state.status === 'success'
                    ? '#4CAF50'
                    : '#667eea',
                  transition: 'width 0.3s ease'
                }} />
              </div>

              {state.error && (
                <p style={{ 
                  color: '#f44336', 
                  fontSize: '0.875rem',
                  marginTop: '0.5rem'
                }}>
                  {state.error}
                </p>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default FileUploadWithProgress;

Cancellable Uploads

Users should be able to cancel long-running uploads. Here's how to implement cancellation:

const uploadFileWithCancellation = (
  file: File,
  url: string,
  onProgress: (progress: UploadProgress) => void
): { promise: Promise<void>; cancel: () => void } => {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('file', file);

  const promise = new Promise<void>((resolve, reject) => {
    xhr.upload.addEventListener('progress', (e) => {
      if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        onProgress({
          fileName: file.name,
          progress: Math.round(percentComplete),
          loaded: e.loaded,
          total: e.total
        });
      }
    });

    xhr.addEventListener('load', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve();
      } else {
        reject(new Error(`Upload failed with status ${xhr.status}`));
      }
    });

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

    xhr.addEventListener('abort', () => {
      reject(new Error('Upload was cancelled'));
    });

    xhr.open('POST', url);
    xhr.send(formData);
  });

  // Return both the promise and a cancel function
  return {
    promise,
    cancel: () => xhr.abort()
  };
};

// Usage with cancel button
const FileUploadWithCancel: React.FC = () => {
  const [uploadController, setUploadController] = useState<{
    cancel: () => void;
  } | null>(null);

  const handleUpload = async (file: File) => {
    const controller = uploadFileWithCancellation(
      file,
      '/api/upload',
      (progress) => {
        console.log(`Progress: ${progress.progress}%`);
      }
    );

    setUploadController(controller);

    try {
      await controller.promise;
      console.log('Upload complete!');
      setUploadController(null);
    } catch (error) {
      console.error('Upload failed or cancelled:', error);
      setUploadController(null);
    }
  };

  const handleCancel = () => {
    if (uploadController) {
      uploadController.cancel();
    }
  };

  return (
    <div>
      {uploadController && (
        <button onClick={handleCancel}>
          Cancel Upload
        </button>
      )}
    </div>
  );
};

const controller = new AbortController();

fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
});

// To cancel:
controller.abort();

Simulated Upload for Testing

When developing, you might not have a backend ready. Here's a simulated upload function for testing:

const simulateUpload = (
  file: File,
  onProgress: (progress: UploadProgress) => void,
  durationMs: number = 3000
): Promise<void> => {
  return new Promise((resolve) => {
    const startTime = Date.now();
    const interval = 100; // Update every 100ms

    const timer = setInterval(() => {
      const elapsed = Date.now() - startTime;
      const progress = Math.min((elapsed / durationMs) * 100, 100);

      onProgress({
        fileName: file.name,
        progress: Math.round(progress),
        loaded: Math.round((file.size * progress) / 100),
        total: file.size
      });

      if (progress >= 100) {
        clearInterval(timer);
        resolve();
      }
    }, interval);
  });
};

📝 Integration with React Hook Form

File uploads often need to be part of larger forms—think profile updates with avatar uploads, or product listings with multiple images. Let's integrate our file upload component with React Hook Form for complete form management.

Basic File Input with React Hook Form

import { useForm } from 'react-hook-form';

interface FormData {
  name: string;
  email: string;
  avatar: FileList;
}

const ProfileForm: React.FC = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log('Form data:', data);
    
    // Access the file
    if (data.avatar && data.avatar.length > 0) {
      const file = data.avatar[0];
      console.log('Avatar file:', file);
      
      // Here you would upload the file
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input {...register('name', { required: 'Name is required' })} />
        {errors.name && <span>{errors.name.message}</span>}
      </div>

      <div>
        <label>Email:</label>
        <input
          type="email"
          {...register('email', { required: 'Email is required' })}
        />
        {errors.email && <span>{errors.email.message}</span>}
      </div>

      <div>
        <label>Avatar:</label>
        <input
          type="file"
          accept="image/*"
          {...register('avatar', {
            required: 'Avatar is required',
            validate: {
              fileSize: (files: FileList) => {
                if (!files || files.length === 0) return true;
                const file = files[0];
                const maxSize = 5 * 1024 * 1024; // 5MB
                return file.size <= maxSize || 'File must be less than 5MB';
              },
              fileType: (files: FileList) => {
                if (!files || files.length === 0) return true;
                const file = files[0];
                const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
                return allowedTypes.includes(file.type) || 
                  'File must be JPEG, PNG, or WebP';
              }
            }
          })}
        />
        {errors.avatar && <span>{errors.avatar.message}</span>}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
};

Custom Controller for File Upload Component

If you have a custom file upload component (like our drag-drop component), use React Hook Form's Controller:

import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

// Define schema
const profileSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email address'),
  avatar: z
    .custom<File>((file) => file instanceof File, 'Avatar is required')
    .refine(
      (file) => file.size <= 5 * 1024 * 1024,
      'File must be less than 5MB'
    )
    .refine(
      (file) => ['image/jpeg', 'image/png', 'image/webp'].includes(file.type),
      'File must be JPEG, PNG, or WebP'
    )
});

type ProfileFormData = z.infer<typeof profileSchema>;

const ProfileFormWithCustomComponent: React.FC = () => {
  const {
    control,
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<ProfileFormData>({
    resolver: zodResolver(profileSchema)
  });

  const onSubmit = async (data: ProfileFormData) => {
    console.log('Submitting:', data);
    
    // Upload the file
    const formData = new FormData();
    formData.append('name', data.name);
    formData.append('email', data.email);
    formData.append('avatar', data.avatar);

    try {
      const response = await fetch('/api/profile', {
        method: 'POST',
        body: formData
      });
      
      if (response.ok) {
        alert('Profile updated successfully!');
      }
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input {...register('name')} />
        {errors.name && <span>{errors.name.message}</span>}
      </div>

      <div>
        <label>Email:</label>
        <input type="email" {...register('email')} />
        {errors.email && <span>{errors.email.message}</span>}
      </div>

      <div>
        <label>Avatar:</label>
        <Controller
          name="avatar"
          control={control}
          render={({ field: { onChange, value } }) => (
            <div>
              <input
                type="file"
                accept="image/*"
                onChange={(e) => {
                  const file = e.target.files?.[0];
                  if (file) {
                    onChange(file);
                  }
                }}
              />
              {value && (
                <div style={{ marginTop: '0.5rem' }}>
                  <p>Selected: {value.name}</p>
                  <img
                    src={URL.createObjectURL(value)}
                    alt="Preview"
                    style={{ maxWidth: '200px', maxHeight: '200px' }}
                  />
                </div>
              )}
            </div>
          )}
        />
        {errors.avatar && <span>{errors.avatar.message}</span>}
      </div>

      <button type="submit">Update Profile</button>
    </form>
  );
};

Multiple File Upload with React Hook Form

import { z } from 'zod';

const gallerySchema = z.object({
  title: z.string().min(3, 'Title is required'),
  description: z.string().optional(),
  images: z
    .array(z.custom<File>((file) => file instanceof File))
    .min(1, 'At least one image is required')
    .max(10, 'Maximum 10 images allowed')
    .refine(
      (files) => files.every(file => file.size <= 5 * 1024 * 1024),
      'Each file must be less than 5MB'
    )
    .refine(
      (files) => files.every(file => 
        ['image/jpeg', 'image/png', 'image/webp'].includes(file.type)
      ),
      'All files must be JPEG, PNG, or WebP'
    )
});

type GalleryFormData = z.infer<typeof gallerySchema>;

const GalleryForm: React.FC = () => {
  const {
    control,
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<GalleryFormData>({
    resolver: zodResolver(gallerySchema),
    defaultValues: {
      images: []
    }
  });

  const onSubmit = async (data: GalleryFormData) => {
    console.log('Gallery data:', data);

    // Create FormData for upload
    const formData = new FormData();
    formData.append('title', data.title);
    if (data.description) {
      formData.append('description', data.description);
    }
    
    // Append all images
    data.images.forEach((file, index) => {
      formData.append(`images[${index}]`, file);
    });

    // Upload to server
    try {
      const response = await fetch('/api/gallery', {
        method: 'POST',
        body: formData
      });
      
      if (response.ok) {
        alert('Gallery created successfully!');
      }
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Gallery Title:</label>
        <input {...register('title')} />
        {errors.title && <span>{errors.title.message}</span>}
      </div>

      <div>
        <label>Description:</label>
        <textarea {...register('description')} />
      </div>

      <div>
        <label>Images:</label>
        <Controller
          name="images"
          control={control}
          render={({ field: { onChange, value } }) => (
            <div>
              <input
                type="file"
                multiple
                accept="image/*"
                onChange={(e) => {
                  const files = e.target.files;
                  if (files) {
                    onChange(Array.from(files));
                  }
                }}
              />
              {value && value.length > 0 && (
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
                  gap: '1rem',
                  marginTop: '1rem'
                }}>
                  {value.map((file, index) => (
                    <div key={index}>
                      <img
                        src={URL.createObjectURL(file)}
                        alt={`Preview ${index}`}
                        style={{
                          width: '100%',
                          height: '150px',
                          objectFit: 'cover',
                          borderRadius: '8px'
                        }}
                      />
                      <p style={{ fontSize: '0.75rem', marginTop: '0.25rem' }}>
                        {file.name}
                      </p>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}
        />
        {errors.images && <span>{errors.images.message}</span>}
      </div>

      <button type="submit">Create Gallery</button>
    </form>
  );
};

🔒 Best Practices and Security

File uploads can be a security risk if not handled properly. Let's cover essential best practices and security considerations for safe file handling.

Client-Side Security Considerations

1. Never Trust File Extensions or MIME Types

Malicious users can rename files or modify MIME types. Always validate on the server side:

// ❌ BAD: Only checking extension
const isImage = filename.endsWith('.jpg');

// ❌ BAD: Only checking MIME type
const isImage = file.type.startsWith('image/');

// ✅ BETTER: Check both (but still validate server-side!)
const isValidImage = (file: File): boolean => {
  const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
  const validExtensions = ['.jpg', '.jpeg', '.png', '.webp'];
  
  const hasValidType = validTypes.includes(file.type);
  const hasValidExtension = validExtensions.some(ext => 
    file.name.toLowerCase().endsWith(ext)
  );
  
  return hasValidType && hasValidExtension;
};

2. Validate File Content (Magic Numbers)

For extra security, check file "magic numbers" (file signatures in the first bytes):

const checkFileSignature = async (file: File): Promise<boolean> => {
  // Read first few bytes
  const buffer = await file.slice(0, 4).arrayBuffer();
  const bytes = new Uint8Array(buffer);
  
  // Check magic numbers for common image formats
  // JPEG: FF D8 FF
  if (bytes[0] === 0xFF && bytes[1] === 0xD8 && bytes[2] === 0xFF) {
    return true;
  }
  
  // PNG: 89 50 4E 47
  if (bytes[0] === 0x89 && bytes[1] === 0x50 && 
      bytes[2] === 0x4E && bytes[3] === 0x47) {
    return true;
  }
  
  // WebP: 52 49 46 46
  if (bytes[0] === 0x52 && bytes[1] === 0x49 && 
      bytes[2] === 0x46 && bytes[3] === 0x46) {
    return true;
  }
  
  return false;
};

3. Limit File Sizes

// Set reasonable limits based on your use case
const MAX_FILE_SIZE = {
  avatar: 2 * 1024 * 1024,      // 2MB for avatars
  document: 10 * 1024 * 1024,   // 10MB for documents
  video: 100 * 1024 * 1024      // 100MB for videos
};

4. Sanitize File Names

const sanitizeFileName = (filename: string): string => {
  return filename
    .toLowerCase()
    .replace(/[^a-z0-9.-]/g, '_')  // Replace invalid chars with underscore
    .replace(/_{2,}/g, '_')        // Replace multiple underscores with one
    .replace(/^_|_$/g, '');        // Remove leading/trailing underscores
};

// Usage
const safeFilename = sanitizeFileName(file.name);
// "My Photo (1).jpg" → "my_photo_1.jpg"

Performance Best Practices

1. Use Object URLs for Previews

// ✅ GOOD: Fast and memory-efficient
const url = URL.createObjectURL(file);
// Remember to revoke when done!
URL.revokeObjectURL(url);

2. Compress Images Before Upload

Reduce file sizes client-side to save bandwidth and storage:

const compressImage = (
  file: File,
  maxWidth: number = 1920,
  maxHeight: number = 1080,
  quality: number = 0.8
): Promise<Blob> => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    img.onload = () => {
      let { width, height } = img;

      // Calculate new dimensions
      if (width > maxWidth) {
        height = (height * maxWidth) / width;
        width = maxWidth;
      }
      if (height > maxHeight) {
        width = (width * maxHeight) / height;
        height = maxHeight;
      }

      canvas.width = width;
      canvas.height = height;

      // Draw and compress
      ctx?.drawImage(img, 0, 0, width, height);
      
      canvas.toBlob(
        (blob) => {
          if (blob) {
            resolve(blob);
          } else {
            reject(new Error('Compression failed'));
          }
        },
        'image/jpeg',
        quality
      );

      URL.revokeObjectURL(img.src);
    };

    img.onerror = reject;
    img.src = URL.createObjectURL(file);
  });
};

3. Lazy Load Preview Images

// Use loading="lazy" for preview images
<img 
  src={preview} 
  alt="Preview" 
  loading="lazy"
  style={{ maxWidth: '200px' }}
/>

4. Debounce Validation

If validating dimensions or other async checks, debounce to avoid excessive processing:

import { useState, useEffect } from 'react';

const useDebounce = <T,>(value: T, delay: number): T => {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

UX Best Practices

Accessibility Checklist

<!-- ✅ Good: Accessible file upload -->
<div role="region" aria-label="File upload">
  <label htmlFor="file-upload" id="file-label">
    Upload your document
    <span class="hint">(Max 5MB, PDF or Word)</span>
  </label>
  
  <input
    id="file-upload"
    type="file"
    accept=".pdf,.doc,.docx"
    aria-describedby="file-hint file-error"
  />
  
  <p id="file-hint" class="hint">
    Choose a file or drag and drop it here
  </p>
  
  <div id="file-error" role="alert" aria-live="polite">
    {/* Error messages appear here */}
  </div>
</div>

🏋️ Hands-On Exercises

Now it's time to practice! Work through these exercises to solidify your understanding of file uploads in React.

📚 Summary and Next Steps

📖 Additional Resources

Official Documentation

• MDN: File API
• MDN: FileReader
• MDN: Drag and Drop API
• MDN: FormData
• React Hook Form Documentation

Libraries and Tools

• react-dropzone: Popular drag-drop file upload library
• react-image-crop: Image cropping component
• compressor.js: Client-side image compression
• pdf.js: PDF viewing and manipulation
• uppy: Complete file upload solution with many features

Advanced Topics to Explore

• Chunked Uploads: Splitting large files for reliable uploads
• Resumable Uploads: Continuing interrupted uploads
• Image Manipulation: Cropping, rotating, filters before upload
• WebRTC: Camera/video capture directly in the browser
• Service Workers: Background uploads that survive page refresh
• Direct-to-S3 Upload: Uploading directly to cloud storage

🚀 What's Next?

Now that you've mastered file uploads, you can:

• Build Real Applications: Add file upload features to your projects
• Explore Advanced Patterns: Learn about multi-step forms and wizards
• Backend Integration: Connect your uploads to real server endpoints
• Cloud Storage: Learn to upload directly to AWS S3, Cloudinary, or Firebase
• Image Processing: Explore client-side image manipulation libraries

In the next lesson, we'll explore Advanced Form Patterns including multi-step forms, conditional fields, and form wizards!