how to validate files with formik and typescript?

Viewed 17

I am validating a form with formik but I don't know how to upload correctly the selected files, so that they are not passed as a string, the form that I have seen that is usually used gives me errors (onChange={(event) =>{ formik.setFieldValue("file", event.target.files[0]);}}/>). I have omitted a large part of the form that is very long, I have only shown the part of the upload files.

import React, { useState } from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import validationSchema from "../../validation-form-collegiate/validationSchema";

interface FormValues {
    
   
    //validacion documentacion
    title: string;
    photo: string;
    photoDni: string;
    registration: string;
  
    
    }
  


export const RegistrationRequest = () => {
///validacion formulario

  const initialValues: FormValues = {
    //validacion documentacion
    title: "",
    photo: "",
    photoDni: "",
    registration: "",

  };

  const onSubmit = (values: FormValues) => {
    setTimeout(() => {
        console.log(values)
      alert(JSON.stringify(values, null, 2));
    }, 500);
  };
return (
<>
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}> 
            <Form>
 <div id="accordion-collapse-body-3" className="block border-b pb-4" aria-labelledby="accordion-collapse-heading-3">
                                <p className="my-2 text-xs text-neutral-500">Junto con su solicitud de alta es necesario que aporte la siguiente documentación:</p>
                                <div className="relative">
                                    <h3 className="text-neutral-500 font-medium text-sm">Adjuntar título*</h3>
                                    <Field name="title" className="block w-full text-xs text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer my-2" id="file" type="file" 
                                     onChange={(event) =>{ formik.setFieldValue("file", event.target.files[0]);}}/>
                                    <ErrorMessage name="title" component="span" className="mt-2 text-xs text-red-600"/>
                                    <p className="my-2 text-xs text-neutral-500">Adjuntar título Oficial de Fisioterapia (Diplomatura o Graduado)</p>
                                    <p className="my-2 text-xs text-neutral-500">Los archivos deben ser menores que <b>50MB</b>. Tipos de archivo permitidos: <b>.gif .jpg .jpeg .png .pdf</b>.</p>
                                </div>
                                <div className="relative">
                                    <h3 className="text-neutral-500 font-medium text-sm">Fotografía*</h3>
                                    <Field name="photo" className="block w-full text-xs text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer my-2" id="" type="file"/>
                                    <ErrorMessage name="photo" component="span" className="mt-2 text-xs text-red-600"/>
                                    <p className="my-2 text-xs text-neutral-500">Los archivos deben ser menores que <b>200Kb.</b>. Tipos de archivo permitidos: <b>.gif .jpg .png</b>.</p>
                                </div>
                                <div className="relative">
                                    <h3 className="text-neutral-500 font-medium text-sm">Fotocopia DNI/NIE*</h3>
                                    <Field name="photoDni" className="block w-full text-xs text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer my-2" id="" type="file"/>
                                    <ErrorMessage name="photoDni" component="span" className="mt-2 text-xs text-red-600"/>
                                    <p className="my-2 text-xs text-neutral-500">Los archivos deben ser menores que <b>200Kb.</b>. Tipos de archivo permitidos: <b>.gif .jpg .jpeg .png .pdf</b>.</p>
                                </div>
                                <div className="relative">
                                    <h3 className="text-neutral-500 font-medium text-sm">Justificante Cuota Inscripción*</h3>
                                    <Field name="registration" className="block w-full text-xs text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer my-2" id="" type="file"/>
                                    <ErrorMessage name="registration" component="span" className="mt-2 text-xs text-red-600"/>
                                    <p className="my-2 text-xs text-neutral-500">Revisa la <a href="https://www.colfisiocv.com/cuota-inscripcion?width=500&height=500&iframe=true" target="_blank" className="text-teal-600 underline">Cuota de Inscripción</a></p>
                                    <p className="my-2 text-xs text-neutral-500">Los archivos deben ser menores que <b>200Kb.</b>. Tipos de archivo permitidos: <b>.gif .jpg .png .pdf</b>.</p>
                                </div>
 </Form> 
                </Formik>
</>
)
}


0 Answers
Related