Upload de imagens em um formulário usando o React Hook Form e o Zod

    felipebdn
    há 10 meses
    0

    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.