signal-desktop/ts/components/CompositionUpload.tsx

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React, { ChangeEventHandler, forwardRef, useState } from 'react';

import { AttachmentType } from '../types/Attachment';
import { AttachmentToastType } from '../types/AttachmentToastType';
import { LocalizerType } from '../types/Util';

import { ToastCannotMixImageAndNonImageAttachments } from './ToastCannotMixImageAndNonImageAttachments';
import { ToastDangerousFileType } from './ToastDangerousFileType';
import { ToastFileSize } from './ToastFileSize';
import { ToastMaxAttachments } from './ToastMaxAttachments';
import { ToastOneNonImageAtATime } from './ToastOneNonImageAtATime';
import { ToastUnableToLoadAttachment } from './ToastUnableToLoadAttachment';
import type { HandleAttachmentsProcessingArgsType } from '../util/handleAttachmentsProcessing';

export type PropsType = {
  addAttachment: (
    conversationId: string,
    attachment: AttachmentType
  ) => unknown;
  addPendingAttachment: (
    conversationId: string,
    pendingAttachment: AttachmentType
  ) => unknown;
  conversationId: string;
  draftAttachments: ReadonlyArray<AttachmentType>;
  i18n: LocalizerType;
  processAttachments: (options: HandleAttachmentsProcessingArgsType) => unknown;
  removeAttachment: (conversationId: string, filePath: string) => unknown;
};

export const CompositionUpload = forwardRef<HTMLInputElement, PropsType>(
  (
    {
      addAttachment,
      addPendingAttachment,
      conversationId,
      draftAttachments,
      i18n,
      processAttachments,
      removeAttachment,
    },
    ref
  ) => {
    const [toastType, setToastType] = useState<
      AttachmentToastType | undefined
    >();

    const onFileInputChange: ChangeEventHandler<HTMLInputElement> = async event => {
      const files = event.target.files || [];

      await processAttachments({
        addAttachment,
        addPendingAttachment,
        conversationId,
        files: Array.from(files),
        draftAttachments,
        onShowToast: setToastType,
        removeAttachment,
      });
    };

    function closeToast() {
      setToastType(undefined);
    }

    let toast;

    if (toastType === AttachmentToastType.ToastFileSize) {
      toast = (
        <ToastFileSize
          i18n={i18n}
          limit={100}
          onClose={closeToast}
          units="MB"
        />
      );
    } else if (toastType === AttachmentToastType.ToastDangerousFileType) {
      toast = <ToastDangerousFileType i18n={i18n} onClose={closeToast} />;
    } else if (toastType === AttachmentToastType.ToastMaxAttachments) {
      toast = <ToastMaxAttachments i18n={i18n} onClose={closeToast} />;
    } else if (toastType === AttachmentToastType.ToastOneNonImageAtATime) {
      toast = <ToastOneNonImageAtATime i18n={i18n} onClose={closeToast} />;
    } else if (
      toastType ===
      AttachmentToastType.ToastCannotMixImageAndNonImageAttachments
    ) {
      toast = (
        <ToastCannotMixImageAndNonImageAttachments
          i18n={i18n}
          onClose={closeToast}
        />
      );
    } else if (toastType === AttachmentToastType.ToastUnableToLoadAttachment) {
      toast = <ToastUnableToLoadAttachment i18n={i18n} onClose={closeToast} />;
    }

    return (
      <>
        {toast}
        <input
          hidden
          multiple
          onChange={onFileInputChange}
          ref={ref}
          type="file"
        />
      </>
    );
  }
);