Handling Server-Side Errors in File Uploads

import { useForm } from '@tanstack/react-form';
import axios from 'axios';

function FileUploadForm() {
  const form = useForm({
    defaultValues: {
      file: null
    },
    onSubmit: async (values) => {
      const formData = new FormData();
      formData.append('file', values.file);
      try {
        // Replace '/api/upload' with your actual API route
        await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        alert('File uploaded successfully');
      } catch (error) {
        form.setError('file', {
          type: 'server',
          message: error.response?.data?.message || 'An error occurred during file upload.'
        });
      }
    }
  });

  return (
    <form onSubmit={form.handleSubmit()}>
      <input
        type="file"
        onChange={(e) => form.setValue('file', e.target.files[0])}
        accept="image/*"
      />
      {form.errors.file && <p>{form.errors.file.message}</p>}
      <button type="submit">Upload</button>
    </form>
  );
}