Mastering File Upload and Image Handling in React Hook Form

Handling file uploads in web applications can be tricky, but React Hook Form makes it surprisingly straightforward. Today, I’ll walk you through how to create a robust file upload system with image preview functionality using React Hook Form.

Understanding the Basics

Before diving deep into the implementation, let’s understand what we’re trying to achieve. We want to create a form that allows users to:

• Upload image files
• Preview the uploaded images instantly
• Validate file types and sizes
• Handle multiple file uploads
• Show upload progress

Setting Up the Form

First, you’ll need to set up your basic React Hook Form structure. The interesting part comes with handling file inputs, which work a bit differently from regular form fields.

Let’s look at a practical example of how to implement file upload functionality:

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

const FileUploadForm = () => {
  const { register, handleSubmit, watch } = useForm();
  const selectedFile = watch("image");

  const onSubmit = (data) => {
    // Handle file upload logic
    console.log(data.image[0]);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="file"
        {...register("image", {
          required: "Please select an image",
          validate: {
            fileSize: (value) => {
              if (!value[0]) return true;
              return value[0].size <= 2000000 || "File size must be less than 2MB";
            },
            fileType: (value) => {
              if (!value[0]) return true;
              return (
                ["image/jpeg", "image/png", "image/gif"].includes(value[0].type) ||
                "Only JPEG, PNG, and GIF files are allowed"
              );
            },
          },
        })}
      />
      <button type="submit">Upload</button>
    </form>
  );
};

Adding Image Preview

One of the most user-friendly features we can add is an instant image preview. This gives users immediate feedback about their file selection.

const ImagePreview = ({ file }) => {
  const [preview, setPreview] = useState(null);

  useEffect(() => {
    if (!file) return;

    const reader = new FileReader();
    reader.onloadend = () => {
      setPreview(reader.result);
    };
    reader.readAsDataURL(file);

    return () => {
      URL.revokeObjectURL(preview);
    };
  }, [file]);

  return preview ? (
    <img src={preview} alt="Preview" style={{ maxWidth: '200px' }} />
  ) : null;
};

Advanced Features and Best Practices

Remember to:

• Always validate file types on both client and server side
• Implement proper error handling
• Show upload progress for large files
• Consider implementing drag and drop
• Optimize images before upload if needed
• Handle multiple file uploads efficiently

Conclusion

React Hook Form makes file handling much more manageable than traditional methods. By combining it with modern browser APIs and some custom components, you can create a powerful and user-friendly file upload system.