fab-manager/app/frontend/src/javascript/components/form/form-file-upload.tsx

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Path } from 'react-hook-form';
import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
import { FieldPathValue } from 'react-hook-form/dist/types/path';
import { FieldValues } from 'react-hook-form/dist/types/fields';
import { FormInput } from '../form/form-input';
import { FormComponent } from '../../models/form-component';
import { AbstractFormItemProps } from './abstract-form-item';
import { FabButton } from '../base/fab-button';
import { FilePdf, Trash } from 'phosphor-react';

export interface FileType {
  id?: number,
  attachment_name?: string,
  attachment_url?: string
}

interface FormFileUploadProps<TFieldValues> extends FormComponent<TFieldValues>, AbstractFormItemProps<TFieldValues> {
  setValue: UseFormSetValue<TFieldValues>,
  defaultFile?: FileType,
  accept?: string,
  onFileChange?: (value: FileType) => void,
  onFileRemove?: () => void,
}

/**
 * This component allows to upload file, in forms managed by react-hook-form.
 */
export const FormFileUpload = <TFieldValues extends FieldValues>({ id, register, defaultFile, className, rules, disabled, error, warning, formState, onFileChange, onFileRemove, accept, setValue }: FormFileUploadProps<TFieldValues>) => {
  const { t } = useTranslation('shared');

  const [file, setFile] = useState<FileType>(defaultFile);

  /**
   * Check if file is selected
   */
  const hasFile = (): boolean => {
    return !!file?.attachment_name;
  };

  /**
   * Callback triggered when the user has ended its selection of a file (or when the selection has been cancelled).
   */
  function onFileSelected (event: React.ChangeEvent<HTMLInputElement>) {
    const f = event.target?.files[0];
    if (f) {
      setFile({
        attachment_name: f.name
      });
      setValue(
        `${id}[_destroy]` as Path<TFieldValues>,
        false as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
      );
      if (typeof onFileChange === 'function') {
        onFileChange({ attachment_name: f.name });
      }
    }
  }

  /**
   * Callback triggered when the user clicks on the delete button.
   */
  function onRemoveFile () {
    if (file?.id) {
      setValue(
        `${id}[_destroy]` as Path<TFieldValues>,
        true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
      );
    }
    setValue(
      `${id}[attachment_files]` as Path<TFieldValues>,
      null as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
    );
    setFile(null);
    if (typeof onFileRemove === 'function') {
      onFileRemove();
    }
  }

  // Compose classnames from props
  const classNames = [
    `${className || ''}`
  ].join(' ');

  /**
   * Returns placeholder text
   */
  const placeholder = (): string => hasFile() ? t('app.shared.form_file_upload.edit') : t('app.shared.form_file_upload.browse');

  return (
    <div className={`form-file-upload ${classNames}`}>
      {hasFile() && (
        <span>{file.attachment_name}</span>
      )}
      <div className="actions">
        {file?.id && file?.attachment_url && (
          <a href={file.attachment_url}
            target="_blank"
            className="fab-button"
            rel="noreferrer">
            <FilePdf size={24} />
          </a>
        )}
        <FormInput type="file"
                    className="image-file-input"
                    accept={accept}
                    register={register}
                    formState={formState}
                    rules={rules}
                    disabled={disabled}
                    error={error}
                    warning={warning}
                    id={`${id}[attachment_files]`}
                    onChange={onFileSelected}
                    placeholder={placeholder()}/>
        {hasFile() &&
          <FabButton onClick={onRemoveFile} icon={<Trash size={20} weight="fill" />} className="is-main" />
        }
      </div>
    </div>
  );
};