snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/room/modals/FileUploadModal/FilePreview.tsx

@@ -0,0 +1,55 @@
+import GenericPreview from './GenericPreview';
+import MediaPreview from './MediaPreview';
+import { MAX_FILE_SIZE_PREVIEW } from '../../../../lib/constants';
+import { isIE11 } from '../../../../lib/utils/isIE11';
+
+export enum FilePreviewType {
+	IMAGE = 'image',
+	AUDIO = 'audio',
+	VIDEO = 'video',
+}
+
+const getFileType = (fileType: File['type']): FilePreviewType | undefined => {
+	if (!fileType) {
+		return;
+	}
+	for (const type of Object.values(FilePreviewType)) {
+		if (fileType.indexOf(type) > -1) {
+			return type;
+		}
+	}
+};
+
+const shouldShowMediaPreview = (file: File, fileType: FilePreviewType | undefined): boolean => {
+	if (!fileType) {
+		return false;
+	}
+	if (isIE11) {
+		return false;
+	}
+	// Avoid preview if file size bigger than 10mb
+	if (file.size > MAX_FILE_SIZE_PREVIEW) {
+		return false;
+	}
+	if (!Object.values(FilePreviewType).includes(fileType)) {
+		return false;
+	}
+	return true;
+};
+
+export type FilePreviewProps = {
+	file: File;
+	altText?: string;
+};
+
+const FilePreview = ({ file, altText }: FilePreviewProps) => {
+	const fileType = getFileType(file.type);
+
+	if (shouldShowMediaPreview(file, fileType)) {
+		return <MediaPreview file={file} fileType={fileType as FilePreviewType} altText={altText} />;
+	}
+
+	return <GenericPreview file={file} />;
+};
+
+export default FilePreview;

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.spec.tsx

@@ -0,0 +1,49 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+
+import FileUploadModal from './FileUploadModal';
+import * as stories from './FileUploadModal.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+const defaultProps = {
+	onClose: () => undefined,
+	file: new File([], 'testing.png', { type: 'image/png' }),
+	fileName: 'testing.png',
+	onSubmit: () => undefined,
+};
+
+const defaultWrapper = mockAppRoot().withTranslations('en', 'core', {
+	Update: 'Update',
+	Upload_file_name: 'File name',
+	FileUpload_MediaType_NotAccepted__type__: 'Media type not accepted: {{type}}',
+});
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />);
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />);
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});
+
+it('should not send a renamed file with not allowed mime-type', async () => {
+	render(<FileUploadModal {...defaultProps} />, {
+		wrapper: defaultWrapper.withSetting('FileUpload_MediaTypeBlackList', 'image/svg+xml').build(),
+	});
+
+	const input = await screen.findByRole('textbox', { name: 'File name' });
+	await userEvent.type(input, 'testing.svg');
+
+	const button = await screen.findByRole('button', { name: 'Update' });
+	await userEvent.click(button);
+
+	expect(screen.getByText('Media type not accepted: image/svg+xml')).toBeInTheDocument();
+});

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.stories.tsx

@@ -0,0 +1,19 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import FileUploadModal from '.';
+
+export default {
+	component: FileUploadModal,
+	parameters: {
+		layout: 'fullscreen',
+		actions: { argTypesRegex: '^on.*' },
+	},
+	args: {
+		file: new File(['The lazy brown fox jumped over the lazy brown fox.'], 'test.txt', { type: 'text/plain' }),
+		fileName: 'test.txt',
+	},
+} satisfies Meta<typeof FileUploadModal>;
+
+export const Default: StoryObj<typeof FileUploadModal> = {
+	name: 'FileUploadModal',
+};

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx

@@ -0,0 +1,120 @@
+import {
+	Modal,
+	Box,
+	Button,
+	ModalHeader,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import {
+	TextInput,
+	TextAreaInput,
+	Field,
+	FieldError,
+	FieldRow,
+	FieldLabel,
+	FieldGroup,
+	FieldDescription,
+} from '@rocket.chat/fuselage-forms';
+import type { ComponentProps } from 'react';
+import { memo, useCallback, useId } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import FilePreview from './FilePreview';
+import { getMimeTypeFromFileName } from '../../../../../app/utils/lib/mimeTypes';
+import { fileUploadIsValidContentType } from '../../../../lib/utils/restrictions';
+
+export type FileUploadModalProps = {
+	onClose: () => void;
+	onSubmit: (name: string, altText?: string) => void;
+	file: File;
+	fileName: string;
+	fileAltText?: string;
+};
+
+const FileUploadModal = ({ onClose, file, fileName, fileAltText = '', onSubmit }: FileUploadModalProps) => {
+	const { t } = useTranslation();
+	const fileUploadFormId = useId();
+	const isImage = file.type.startsWith('image/');
+
+	const {
+		control,
+		handleSubmit,
+		formState: { errors, isDirty, isSubmitting },
+	} = useForm({ mode: 'onBlur', defaultValues: { name: fileName, altText: fileAltText } });
+
+	const validateFileName = useCallback(
+		(fieldValue: string) => {
+			const type = getMimeTypeFromFileName(fieldValue);
+			if (fileUploadIsValidContentType(type)) {
+				return undefined;
+			}
+
+			return t('FileUpload_MediaType_NotAccepted__type__', { type });
+		},
+		[t],
+	);
+
+	return (
+		<Modal
+			aria-labelledby={`${fileUploadFormId}-title`}
+			wrapperFunction={(props: ComponentProps<typeof Box>) => (
+				<Box is='form' id={fileUploadFormId} onSubmit={handleSubmit(({ name, altText }) => onSubmit(name, altText?.trim()))} {...props} />
+			)}
+		>
+			<Box display='flex' flexDirection='column' height='100%'>
+				<ModalHeader>
+					<ModalTitle id={`${fileUploadFormId}-title`}>{t('FileUpload')}</ModalTitle>
+					<ModalClose tabIndex={-1} onClick={onClose} />
+				</ModalHeader>
+				<ModalContent>
+					<Box display='flex' maxHeight='x360' width='full' justifyContent='center' alignContent='center' marginBlockEnd={16}>
+						<FilePreview file={file} altText={fileAltText} />
+					</Box>
+					<FieldGroup>
+						<Field>
+							<FieldLabel>{t('Upload_file_name')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='name'
+									control={control}
+									rules={{
+										required: t('error-the-field-is-required', { field: t('Upload_file_name') }),
+										validate: validateFileName,
+									}}
+									render={({ field }) => <TextInput {...field} error={errors.name?.message} aria-required='true' />}
+								/>
+							</FieldRow>
+							{errors.name && <FieldError>{errors.name.message}</FieldError>}
+						</Field>
+						{isImage && (
+							<Field>
+								<FieldLabel>{t('Alternative_text')}</FieldLabel>
+								<FieldDescription>{t('Alt_text_description')}</FieldDescription>
+								<FieldRow>
+									<Controller name='altText' control={control} render={({ field }) => <TextAreaInput {...field} />} />
+								</FieldRow>
+							</Field>
+						)}
+					</FieldGroup>
+				</ModalContent>
+				<ModalFooter>
+					<ModalFooterControllers>
+						<Button secondary onClick={onClose}>
+							{t('Cancel')}
+						</Button>
+						<Button primary type='submit' disabled={!isDirty} loading={isSubmitting}>
+							{t('Update')}
+						</Button>
+					</ModalFooterControllers>
+				</ModalFooter>
+			</Box>
+		</Modal>
+	);
+};
+
+export default memo(FileUploadModal);

apps/meteor/client/views/room/modals/FileUploadModal/GenericPreview.tsx

@@ -0,0 +1,14 @@
+import { Box, Icon } from '@rocket.chat/fuselage';
+
+import { formatBytes } from '../../../../lib/utils/formatBytes';
+
+export type GenericPreviewProps = { file: File };
+
+const GenericPreview = ({ file }: GenericPreviewProps) => (
+	<Box display='flex' alignItems='center' width='full' fontScale='h4'>
+		<Icon name='file' size='x24' marginInlineStart={-2} marginInlineEnd={4} />
+		{`${file.name} - ${formatBytes(file.size, 2)}`}
+	</Box>
+);
+
+export default GenericPreview;

apps/meteor/client/views/room/modals/FileUploadModal/ImagePreview.tsx

@@ -0,0 +1,44 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useState } from 'react';
+
+import GenericPreview from './GenericPreview';
+import PreviewSkeleton from './PreviewSkeleton';
+
+export type ImagePreviewProps = {
+	url: string;
+	file: File;
+	altText?: string;
+};
+
+const ImagePreview = ({ url, file, altText = '' }: ImagePreviewProps) => {
+	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(true);
+
+	const handleLoad = (): void => setLoading(false);
+	const handleError = (): void => {
+		setLoading(false);
+		setError(true);
+	};
+
+	if (error) {
+		return <GenericPreview file={file} />;
+	}
+
+	return (
+		<>
+			{loading && <PreviewSkeleton />}
+			<Box
+				is='img'
+				src={url}
+				alt={altText}
+				maxWidth='full'
+				objectFit='contain'
+				onLoad={handleLoad}
+				onError={handleError}
+				display={loading ? 'none' : 'initial'}
+			/>
+		</>
+	);
+};
+
+export default ImagePreview;

apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx

@@ -0,0 +1,54 @@
+import { AudioPlayer, Box, Icon } from '@rocket.chat/fuselage';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FilePreviewType } from './FilePreview';
+import ImagePreview from './ImagePreview';
+import PreviewSkeleton from './PreviewSkeleton';
+import { userAgentMIMETypeFallback } from '../../../../lib/utils/userAgentMIMETypeFallback';
+import { useFileAsDataURL } from '../../hooks/useFileAsDataURL';
+
+export type MediaPreviewProps = {
+	file: File;
+	fileType: FilePreviewType;
+	altText?: string;
+};
+
+const MediaPreview = ({ file, fileType, altText }: MediaPreviewProps) => {
+	const [loaded, url] = useFileAsDataURL(file);
+	const { t } = useTranslation();
+
+	if (!loaded) {
+		return <PreviewSkeleton />;
+	}
+
+	if (typeof url !== 'string') {
+		return (
+			<Box display='flex' alignItems='center' width='full'>
+				<Icon name='image' size='x24' marginInlineEnd={4} />
+				{t('FileUpload_Cannot_preview_file')}
+			</Box>
+		);
+	}
+
+	if (fileType === FilePreviewType.IMAGE) {
+		return <ImagePreview url={url} file={file} altText={altText} />;
+	}
+
+	if (fileType === FilePreviewType.VIDEO) {
+		return (
+			<Box is='video' width='full' controls>
+				<source src={url} type={userAgentMIMETypeFallback(file.type)} />
+				{t('Browser_does_not_support_video_element')}
+			</Box>
+		);
+	}
+
+	if (fileType === FilePreviewType.AUDIO) {
+		return <AudioPlayer src={url} />;
+	}
+
+	throw new Error('Wrong props provided for MediaPreview');
+};
+
+export default memo(MediaPreview);

apps/meteor/client/views/room/modals/FileUploadModal/PreviewSkeleton.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from '@rocket.chat/fuselage';
+
+const PreviewSkeleton = () => <Skeleton variant='rect' width='full' height='x200' />;
+
+export default PreviewSkeleton;

apps/meteor/client/views/room/modals/FileUploadModal/__snapshots__/FileUploadModal.spec.tsx.snap

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_0_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <form
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+        id="_r_0_"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-ogq2n4"
+        >
+          <header
+            class="rcx-box rcx-box--full rcx-modal__header"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-inner"
+            >
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title rcx-css-trljwa rcx-css-lma364"
+                id="_r_0_-title"
+              >
+                FileUpload
+              </h2>
+              <button
+                aria-label="Close"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+                tabindex="-1"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
+          </header>
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-56vo9k"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-t4oqeh"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-css-cifyzt"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-file rcx-icon rcx-css-1c958sc"
+                  >
+                    ⦕
+                  </i>
+                  test.txt - 50 Bytes
+                </div>
+              </div>
+              <fieldset
+                class="rcx-box rcx-box--full rcx-field-group"
+                role="group"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-field rcx-field-group__item"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                    for="react-aria-_r_1_-label"
+                  >
+                    Upload_file_name
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <input
+                      aria-describedby=""
+                      aria-invalid="false"
+                      aria-required="true"
+                      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+                      id="react-aria-_r_1_-label"
+                      name="name"
+                      size="1"
+                      type="text"
+                      value="test.txt"
+                    />
+                  </span>
+                </div>
+              </fieldset>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+          >
+            <div
+              class="rcx-button-group rcx-button-group--align-end"
+              role="group"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+                type="button"
+              >
+                <span
+                  class="rcx-button--content"
+                >
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+                disabled=""
+                type="submit"
+              >
+                <span
+                  class="rcx-button--content"
+                >
+                  Update
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </dialog>
+  </div>
+</body>
+`;

apps/meteor/client/views/room/modals/FileUploadModal/index.ts

@@ -0,0 +1 @@
+export { default } from './FileUploadModal';