Accept multiple images and videos in attachment picker

This commit is contained in:
Jamie Kyle 2022-09-15 14:40:48 -07:00 committed by GitHub
parent 6cfe2a09df
commit 01587b0f39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 87 additions and 54 deletions

View file

@ -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(',')}
/>
</>
);