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,
    soundFileName: "",
    soundUrl: "",
  };

  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, values }) => (
        <Form>
          <label htmlFor="soundFile" className="">
            Sound File
          </label>
          <FormGroup>
            <input
              type="file"
              name="soundFile"
              id="sightingSoundinput"
              accept="audio/mpeg"
              className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center 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 && e.target?.files[0]?.type === "audio/mpeg") {
                  const url = URL.createObjectURL(e.target.files[0]);
                  setFieldValue("soundUrl", url);
                  setFieldValue("name", e.target.files[0].name);
                  setFieldValue("soundFileName", 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>

          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
            {!values.soundFile && (
              <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
                No uploaded sound files
              </div>
            )}
            <p className="max-w-md text-slate-300">
              Uploaded Sound files will appear in the <span className="font-bold">drop downs</span> once they are
              uploaded. They can be used for any <span className="text-blue-400">Sighting,</span>{" "}
              <span className="text-emerald-400">Hotlist</span> or <span className="text-amber-600">NPED</span> hits.
            </p>
          </div>

          {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 mt-[5%]"
            disabled={errors.soundFile ? true : false}
          >
            Upload
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default SoundUpload;