FileField.tsx

import { Button, ButtonGroup } from "@mui/material";
import FileUploadIcon from "@mui/icons-material/FileUpload";
import Visibility from "@mui/icons-material/Visibility";
import { ChangeEventHandler, useRef } from "react";
import { CWFile } from "@/types";
import { downloadFile, getFileNameFromURL, openFile } from "@/utils";
import { ButtonTooltip } from "./ButtonTooltip";

interface FileFieldProps {
  label: string;
  value?: CWFile;
  disabled?: boolean;
  onChange?: (file: CWFile) => void;
}

export function FileField({
  label,
  value,
  disabled = false,
  onChange,
}: FileFieldProps) {
  const ref = useRef<HTMLInputElement>(null);

  const onPressOpen = async () => {
    let fileToOpen = value?.data as Blob;
    // The file is available on the server, fetch it
    if (!fileToOpen && value?.downloadUrl) {
      fileToOpen = await downloadFile(value.downloadUrl);
    }
    openFile(fileToOpen);
  };

  const chooseFile = () => {
    ref.current?.click();
  };

  const onFileChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    if (e.target.files && e.target.files.length > 0 && onChange) {
      const file = e.target.files[0];
      if (value) {
        onChange({
          ...value,
          data: file,
        });
      } else {
        onChange({
          data: file,
        });
      }
    }
  };

  const filePresent = value?.downloadUrl || value?.data;

  return (
    <>
      <input
        type="file"
        style={{ display: "none" }}
        ref={ref}
        onChange={onFileChange}
      />
      <ButtonGroup variant={filePresent ? "outlined" : "text"}>
        <Button
          fullWidth
          startIcon={<FileUploadIcon />}
          disabled={disabled}
          onClick={chooseFile}
        >
          {label}
          {filePresent
            ? ` ${getFileName()}: Modifier le fichier`
            : " : Choisir un fichier"}
        </Button>
        <ButtonTooltip
          title={
            filePresent ? "Télécharger le fichier" : "Aucun fichier en ligne"
          }
        >
          <Button
            startIcon={<Visibility />}
            disabled={disabled || !filePresent}
            onClick={onPressOpen}
          >
            Voir
          </Button>
        </ButtonTooltip>
      </ButtonGroup>
    </>
  );
}