File Uploads

Learn how to implement robust file uploads with progress indicators and validation.

Basic Upload

import { storage } from '@demo/storage';

const handleUpload = async (file) => {
  const result = await storage.upload(`uploads/${file.name}`, file);
  console.log('Uploaded:', result.url);
};

Upload with Progress

Track upload progress for better UX:

const [progress, setProgress] = useState(0);

const uploadWithProgress = async (file) => {
  await storage.upload(`uploads/${file.name}`, file, {
    onProgress: (percent) => {
      setProgress(percent);
    }
  });
};

File Validation

const validateFile = (file) => {
  const maxSize = 10 * 1024 * 1024; // 10MB
  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];

  if (file.size > maxSize) {
    throw new Error('File too large (max 10MB)');
  }

  if (!allowedTypes.includes(file.type)) {
    throw new Error('Invalid file type');
  }

  return true;
};

Complete Example

function FileUploader() {
  const [progress, setProgress] = useState(0);
  const [error, setError] = useState(null);

  const handleFile = async (e) => {
    const file = e.target.files[0];
    setError(null);

    try {
      validateFile(file);
      await storage.upload(`uploads/${file.name}`, file, {
        onProgress: setProgress
      });
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFile} />
      {progress > 0 && <ProgressBar value={progress} />}
      {error && <Error message={error} />}
    </div>
  );
}