Accept multiple images and videos in attachment picker

ts/components/CompositionUpload.tsx

@@ -8,16 +8,21 @@ import type {
   InMemoryAttachmentDraftType,
   AttachmentDraftType,
 } from '../types/Attachment';
+import { isVideoAttachment, isImageAttachment } from '../types/Attachment';
 import { AttachmentToastType } from '../types/AttachmentToastType';
 import type { LocalizerType } from '../types/Util';
 
-import { ToastCannotMixImageAndNonImageAttachments } from './ToastCannotMixImageAndNonImageAttachments';
+import { ToastCannotMixMultiAndNonMultiAttachments } from './ToastCannotMixMultiAndNonMultiAttachments';
 import { ToastDangerousFileType } from './ToastDangerousFileType';
 import { ToastFileSize } from './ToastFileSize';
 import { ToastMaxAttachments } from './ToastMaxAttachments';
-import { ToastOneNonImageAtATime } from './ToastOneNonImageAtATime';
+import { ToastUnsupportedMultiAttachment } from './ToastUnsupportedMultiAttachment';
 import { ToastUnableToLoadAttachment } from './ToastUnableToLoadAttachment';
 import type { HandleAttachmentsProcessingArgsType } from '../util/handleAttachmentsProcessing';
+import {
+  getSupportedImageTypes,
+  getSupportedVideoTypes,
+} from '../util/GoogleChrome';
 
 export type PropsType = {
   addAttachment: (
@@ -87,14 +92,18 @@ export const CompositionUpload = forwardRef<HTMLInputElement, PropsType>(
       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
+      toastType === AttachmentToastType.ToastUnsupportedMultiAttachment
     ) {
       toast = (
-        <ToastCannotMixImageAndNonImageAttachments
+        <ToastUnsupportedMultiAttachment i18n={i18n} onClose={closeToast} />
+      );
+    } else if (
+      toastType ===
+      AttachmentToastType.ToastCannotMixMultiAndNonMultiAttachments
+    ) {
+      toast = (
+        <ToastCannotMixMultiAndNonMultiAttachments
           i18n={i18n}
           onClose={closeToast}
         />
@@ -103,6 +112,14 @@ export const CompositionUpload = forwardRef<HTMLInputElement, PropsType>(
       toast = <ToastUnableToLoadAttachment i18n={i18n} onClose={closeToast} />;
     }
 
+    const anyVideoOrImageAttachments = draftAttachments.some(attachment => {
+      return isImageAttachment(attachment) || isVideoAttachment(attachment);
+    });
+
+    const acceptContentTypes = anyVideoOrImageAttachments
+      ? [...getSupportedImageTypes(), ...getSupportedVideoTypes()]
+      : null;
+
     return (
       <>
         {toast}
@@ -112,6 +129,7 @@ export const CompositionUpload = forwardRef<HTMLInputElement, PropsType>(
           onChange={onFileInputChange}
           ref={ref}
           type="file"
+          accept={acceptContentTypes?.join(',')}
         />
       </>
     );

ts/components/ToastCannotMixMultiAndNonMultiAttachments.stories.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { ToastCannotMixImageAndNonImageAttachments } from './ToastCannotMixImageAndNonImageAttachments';
+import { ToastCannotMixMultiAndNonMultiAttachments } from './ToastCannotMixMultiAndNonMultiAttachments';
 
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
@@ -16,13 +16,13 @@ const defaultProps = {
 };
 
 export default {
-  title: 'Components/ToastCannotMixImageAndNonImageAttachments',
+  title: 'Components/ToastCannotMixMultiAndNonMultiAttachments',
 };
 
-export const _ToastCannotMixImageAndNonImageAttachments = (): JSX.Element => (
-  <ToastCannotMixImageAndNonImageAttachments {...defaultProps} />
+export const _ToastCannotMixMultiAndNonMultiAttachments = (): JSX.Element => (
+  <ToastCannotMixMultiAndNonMultiAttachments {...defaultProps} />
 );
 
-_ToastCannotMixImageAndNonImageAttachments.story = {
-  name: 'ToastCannotMixImageAndNonImageAttachments',
+_ToastCannotMixMultiAndNonMultiAttachments.story = {
+  name: 'ToastCannotMixMultiAndNonMultiAttachments',
 };

ts/components/ToastCannotMixMultiAndNonMultiAttachments.tsx

@@ -10,9 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastOneNonImageAtATime = ({
+export const ToastCannotMixMultiAndNonMultiAttachments = ({
   i18n,
   onClose,
 }: PropsType): JSX.Element => {
-  return <Toast onClose={onClose}>{i18n('oneNonImageAtATimeToast')}</Toast>;
+  return (
+    <Toast onClose={onClose}>
+      {i18n('cannotSelectPhotosAndVideosAlongWithFiles')}
+    </Toast>
+  );
 };

ts/components/ToastUnsupportedMultiAttachment.stories.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { ToastOneNonImageAtATime } from './ToastOneNonImageAtATime';
+import { ToastUnsupportedMultiAttachment } from './ToastUnsupportedMultiAttachment';
 
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
@@ -16,13 +16,13 @@ const defaultProps = {
 };
 
 export default {
-  title: 'Components/ToastOneNonImageAtATime',
+  title: 'Components/ToastUnsupportedMultiAttachment',
 };
 
-export const _ToastOneNonImageAtATime = (): JSX.Element => (
-  <ToastOneNonImageAtATime {...defaultProps} />
+export const _ToastUnsupportedMultiAttachment = (): JSX.Element => (
+  <ToastUnsupportedMultiAttachment {...defaultProps} />
 );
 
-_ToastOneNonImageAtATime.story = {
-  name: 'ToastOneNonImageAtATime',
+_ToastUnsupportedMultiAttachment.story = {
+  name: 'ToastUnsupportedMultiAttachment',
 };

ts/components/ToastUnsupportedMultiAttachment.tsx

@@ -10,13 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastCannotMixImageAndNonImageAttachments = ({
+export const ToastUnsupportedMultiAttachment = ({
   i18n,
   onClose,
 }: PropsType): JSX.Element => {
   return (
     <Toast onClose={onClose}>
-      {i18n('cannotMixImageAndNonImageAttachments')}
+      {i18n('cannotSelectPhotosAndVideosAlongWithFiles')}
     </Toast>
   );
 };

ts/components/conversation/StagedPlaceholderAttachment.tsx

@@ -17,7 +17,7 @@ export const StagedPlaceholderAttachment = ({
     type="button"
     className="module-staged-placeholder-attachment"
     onClick={onClick}
-    title={i18n('add-image-attachment')}
+    title={i18n('addImageOrVideoattachment')}
   >
     <div className="module-staged-placeholder-attachment__plus-icon" />
   </button>