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>
</>
)
}