Mav-Mobile-UI/src/components/SettingForms/Sound/SoundUpload.tsx

import { Form, Formik } from "formik";
import FormGroup from "../components/FormGroup";
import type { SoundUploadValue } from "../../../types/types";
import { useSoundContext } from "../../../context/SoundContext";
import { toast } from "sonner";

const SoundUpload = () => {
  const { dispatch } = useSoundContext();
  const initialValues: SoundUploadValue = {
    name: "",
    soundFile: null,
  };

  const handleSubmit = (values: SoundUploadValue) => {
    if (!values.soundFile) {
      toast.warning("Please select an audio file");
    } else {
      dispatch({ type: "ADD", payload: values });
      toast.success("Sound file upload successfully");
    }
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      enableReinitialize
    >
      {({ setFieldValue, errors, setFieldError }) => (
        <Form>
          <FormGroup>
            <label htmlFor="soundFile">Sound File</label>
            <input
              type="file"
              name="soundFile"
              id="sightingSoundinput"
              accept="audio/mpeg"
              onChange={(e) => {
                if (
                  e.target?.files &&
                  e.target?.files[0]?.type === "audio/mpeg"
                ) {
                  setFieldValue("name", e.target.files[0].name);
                  setFieldValue("soundFile", e.target.files[0]);
                } else {
                  setFieldError("soundFile", "Not an mp3 file");
                  toast.error("Not an mp3 file");
                }
              }}
            />
          </FormGroup>
          {errors.soundFile && (
            <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>
          )}
          <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.soundFile ? true : false}
          >
            Upload
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SoundUpload;