Mav-Mobile-UI/src/components/SettingForms/NPED/NPEDHotlist.tsx

import { Form, Formik } from "formik";
import type { HotlistUploadType } from "../../../types/types";

const NPEDHotlist = () => {
  const initialValue = {
    file: null,
  };

  const handleSubmit = (values: HotlistUploadType) => console.log(values.file);
  // upload/hotlist-upload/2
  return (
    <Formik initialValues={initialValue} onSubmit={handleSubmit}>
      {({ setFieldValue, setErrors, errors }) => {
        return (
          <Form className="flex flex-col space-y-2">
            <input
              type="file"
              name="file"
              id="file"
              className="file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
              onChange={(e) => {
                if (e.target.files) {
                  if (e.target.files[0].type !== "text/csv") {
                    setErrors({
                      file: "This file is not a CSV, please select a different one",
                    });

                    return;
                  }
                  setFieldValue("file", e.target.files[0]);
                }
              }}
            />
            <button
              type="submit"
              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
              disabled={errors ? true : false}
            >
              Upload
            </button>
            <p>{errors && errors.file}</p>
          </Form>
        );
      }}
    </Formik>
  );
};

export default NPEDHotlist;