Neste exemplo, você criará um campo de upload de uma ou várias imagens de pets em um formulário usando o React Hook Form e o Zod. Fique a vontade para estilizar todos os elementos desse código.

Passo 1: Configuração Inicial

Certifique-se de ter as dependências necessárias instaladas em seu projeto React:

yarn add react-hook-form zod

Passo 2: Definindo o Esquema de Validação

Importe as bibliotecas necessárias e defina um esquema de validação usando o Zod. Vamos criar um esquema que permita fazer upload de várias imagens de pets:

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

const petImageSchema = z.object({
  file: z.instanceof(File).nullable(),
});

const petBodySchema = z.object({
  images: z.array(petImageSchema),
});

Passo 3: Criando o Componente de Formulário

Agora, crie o componente de formulário React e configure-o com o React Hook Form e o Zod:

export default function FormRegisterPet() {
  const formData = useForm({
    resolver: zodResolver(petBodySchema),
  });

  const { control, handleSubmit } = formData;

  const onSubmit = (data) => {
    console.log(data);
  };

Passo 4: Criando o Campo de Upload de Imagens de Pets

Dentro do componente de formulário, você pode criar o campo de upload de imagens de pets usando o componente Controller do React Hook Form:

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'images',
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} >
      <label
        htmlFor="file"
        onDragOver={(e) => e.preventDefault()}
        onDrop={(event) => {
          event.preventDefault();

          append({ file: event.dataTransfer.files.item(0) });
        }}
      >
        Arraste e solte o arquivo
      </label>
      <input
        type="file"
        id="file"
        accept="image/*"
        className="hidden" // Isso deixa o input invisível
        onChange={(event) => {
          if (event.target.files) {
            append({ file: event.target.files[0] });
          }
        }}
      />

      {fields.map((item, index) => {
        return (
          <div
            key={index}
          >
            <span className="text-sm font-normal leading-7 text-blue">
              {item.file?.name}
            </span>
            <button className="cursor-pointer" onClick={() => remove(index)}>
              Remover
            </button>
          </div>
        );
      })}

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

Este exemplo permite que você colete imagens de pets de forma eficaz em seu aplicativo, com validação de dados e uma interface amigável.