Implementing File Validation with TanStack Form

Showcase how to use TanStack Form to implement client-side validation for file size and type before submitting the form.

import { useForm, Controller } from 'tanstack/react-form';
import React from 'react';

Import necessary hooks and components from TanStack Form and React.

const FileUploadForm = () => {
  const { formContext, Controller } = useForm();
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={formContext.handleSubmit(onSubmit)}>
      <Controller
        name="file"
        control={formContext.control}
        rules={{
          validate: {
            size: value => value[0].size < 10000000 || 'File size should be less than 10MB',
            type: value => ['image/jpeg', 'image/png'].includes(value[0].type) || 'Only JPEG or PNG files are allowed'
          }
        }}
        render={({ field }) => <input type="file" {...field} />}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

Define the FileUploadForm component with a file input controlled by TanStack Form. Implement validation rules for file size (less than 10MB) and type (JPEG or PNG only).

export default FileUploadForm;

Export the FileUploadForm component for use in the application.