From 54fcaab1a8f2ece8cd182b6881b6c2247c63c6f6 Mon Sep 17 00:00:00 2001 From: abhi patel Date: Mon, 1 Apr 2024 01:44:12 +0530 Subject: [PATCH] mutiple file share init --- .../client/lib/chats/flows/uploadFiles.ts | 25 +- .../FileUploadModal/FileUploadModal.tsx | 222 ++++++++++++++++-- 2 files changed, 220 insertions(+), 27 deletions(-) diff --git a/apps/meteor/client/lib/chats/flows/uploadFiles.ts b/apps/meteor/client/lib/chats/flows/uploadFiles.ts index 82572aa2dbf5c..e30d5122faa6e 100644 --- a/apps/meteor/client/lib/chats/flows/uploadFiles.ts +++ b/apps/meteor/client/lib/chats/flows/uploadFiles.ts @@ -7,44 +7,50 @@ import { prependReplies } from '../../utils/prependReplies'; import type { ChatAPI } from '../ChatAPI'; export const uploadFiles = async (chat: ChatAPI, files: readonly File[], resetFileInput?: () => void): Promise => { + console.log('uploadFiles', files, chat); + console.log('uploadFiles'); const replies = chat.composer?.quotedMessages.get() ?? []; - + console.log(replies); const msg = await prependReplies('', replies); - + console.log(msg); const room = await chat.data.getRoom(); - + console.log(room); const queue = [...files]; - const uploadNextFile = (): void => { - const file = queue.pop(); + const file = queue[0]; + if (!file) { chat.composer?.dismissAllQuotedMessages(); return; } - + console.log('uploadNextFile', file); imperativeModal.open({ component: FileUploadModal, props: { + queue, + msg, + chat, file, fileName: file.name, fileDescription: chat.composer?.text ?? '', showDescription: room && !isRoomFederated(room), onClose: (): void => { imperativeModal.close(); - uploadNextFile(); + // uploadNextFile(); }, onSubmit: (fileName: string, description?: string): void => { + // console.log('onSubmit', fileName, description); Object.defineProperty(file, 'name', { writable: true, value: fileName, }); - chat.uploads.send(file, { + chat.uploads.send(queue, { description, msg, }); chat.composer?.clear(); imperativeModal.close(); - uploadNextFile(); + // uploadNextFile(); }, invalidContentType: !(file.type && fileUploadIsValidContentType(file.type)), }, @@ -52,5 +58,6 @@ export const uploadFiles = async (chat: ChatAPI, files: readonly File[], resetFi }; uploadNextFile(); + // } resetFileInput?.(); }; diff --git a/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx b/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx index 312776397b32c..0c87ef9f490c4 100644 --- a/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx +++ b/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx @@ -1,4 +1,17 @@ -import { Modal, Box, Field, FieldGroup, FieldLabel, FieldRow, FieldError, TextInput, Button } from '@rocket.chat/fuselage'; +import { + Modal, + Box, + Field, + FieldGroup, + FieldLabel, + FieldRow, + FieldError, + TextInput, + Button, + Scrollable, + Tile, + Icon, +} from '@rocket.chat/fuselage'; import { useAutoFocus } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useTranslation, useSetting } from '@rocket.chat/ui-contexts'; import fileSize from 'filesize'; @@ -9,6 +22,9 @@ import FilePreview from './FilePreview'; type FileUploadModalProps = { onClose: () => void; + queue?: File[]; + msg: any; + chat: any; onSubmit: (name: string, description?: string) => void; file: File; fileName: string; @@ -19,6 +35,9 @@ type FileUploadModalProps = { const FileUploadModal = ({ onClose, + queue = [], + msg, + chat, file, fileName, fileDescription, @@ -41,28 +60,163 @@ const FileUploadModal = ({ const handleDescription = (e: ChangeEvent): void => { setDescription(e.currentTarget.value); }; + const [que, setQue] = useState([]); // Initialize your queue state - const handleSubmit: FormEventHandler = (e): void => { + const removeFromQue = (fileNameToRemove: string) => { + setQue((prevQue) => prevQue.filter((file) => file.name !== fileNameToRemove)); + }; + const handleAddfile = () => { + console.log('handleAddfile'); + }; + + const handleSubmit: FormEventHandler = async (e): Promise => { e.preventDefault(); - if (!name) { - return dispatchToastMessage({ + if (queue.length > 6) { + dispatchToastMessage({ type: 'error', - message: t('error-the-field-is-required', { field: t('Name') }), + message: "You can't upload more than 6 files at once", + // message: t('error-the-field-is-required', { field: t('Name') }), }); + onClose(); + return; } - // -1 maxFileSize means there is no limit - if (maxFileSize > -1 && (file.size || 0) > maxFileSize) { - onClose(); - return dispatchToastMessage({ - type: 'error', - message: t('File_exceeds_allowed_size_of_bytes', { size: fileSize(maxFileSize) }), - }); + // Iterate over each file in the queue + for (const queuedFile of queue) { + const { name: queuedFileName, size: queuedFileSize, type: queuedFileType } = queuedFile; + + // Validate file name + if (!queuedFileName) { + dispatchToastMessage({ + type: 'error', + message: t('error-the-field-is-required', { field: t('Name') }), + }); + return; + } + + // Validate file size + if (maxFileSize > -1 && (queuedFileSize || 0) > maxFileSize) { + onClose(); + dispatchToastMessage({ + type: 'error', + message: `${t('File_exceeds_allowed_size_of_bytes', { size: fileSize(maxFileSize) })}+" hello testing"`, + }); + return; + } + + // Validate file content type + if (invalidContentType) { + dispatchToastMessage({ + type: 'error', + message: t('FileUpload_MediaType_NotAccepted__type__', { type: queuedFileType }), + }); + onClose(); + return; + } + + // Perform any necessary modifications or checks on the file + // For example, can modify the file name or perform additional validation + + // Send the file using chat.uploads.send or any other relevant method } + // await chat.uploads.send(queue, { + // description, + // msg, // Assuming msg is defined elsewhere + // }); + // Clear the composer after each file submission + // chat.composer?.clear(); onSubmit(name, description); + + // Close the modal after all files are submitted + // imperativeModal.close(); }; + // const handleSubmit: FormEventHandler = (e): void => { + // e.preventDefault(); + + // // Validate each file in the queue and call onSubmit for each valid file + // queue.forEach((queuedFile) => { + // const { name: queuedFileName, size: queuedFileSize, type: queuedFileType } = queuedFile; + + // // Validate file name + // if (!queuedFileName) { + // dispatchToastMessage({ + // type: 'error', + // message: t('error-the-field-is-required', { field: t('Name') }), + // }); + // return; + // } + + // // Validate file size + // if (maxFileSize > -1 && (queuedFileSize || 0) > maxFileSize) { + // onClose(); + // dispatchToastMessage({ + // type: 'error', + // message: t('File_exceeds_allowed_size_of_bytes', { size: fileSize(maxFileSize) }), + // }); + // return; + // } + + // // Validate file content type + // if (invalidContentType) { + // dispatchToastMessage({ + // type: 'error', + // message: t('FileUpload_MediaType_NotAccepted__type__', { type: queuedFileType }), + // }); + // onClose(); + // return; + // } + + // // Call onSubmit for valid file + // onSubmit(queuedFileName, description); + // }); + // }; + + // const handleSubmit: FormEventHandler = (e): void => { + // e.preventDefault(); + // console.log(queue); + // console.log('submit', name, description); + // if (!name) { + // return dispatchToastMessage({ + // type: 'error', + // message: t('error-the-field-is-required', { field: t('Name') }), + // }); + // } + // if (maxFileSize > -1 && (file.size || 0) > maxFileSize) { + // onClose(); + // return dispatchToastMessage({ + // type: 'error', + // message: t('File_exceeds_allowed_size_of_bytes', { size: fileSize(maxFileSize) }), + // }); + // } + + // onSubmit(name, description); + + // queue.map((file) => { + // console.log(file); + // console.log('test'); + // console.log(file.name); + // if (!file.name) { + // return dispatchToastMessage({ + // type: 'error', + // message: t('error-the-field-is-required', { field: t('Name') }), + // }); + // } + + // // -1 maxFileSize means there is no limit + // if (maxFileSize > -1 && (file.size || 0) > maxFileSize) { + // onClose(); + // return dispatchToastMessage({ + // type: 'error', + // message: t('File_exceeds_allowed_size_of_bytes', { size: fileSize(maxFileSize) }), + // }); + // } + + // onSubmit(file.name, description); + // }); + // }; + useEffect(() => { if (invalidContentType) { dispatchToastMessage({ @@ -82,6 +236,8 @@ const FileUploadModal = ({ } }, [file, dispatchToastMessage, invalidContentType, t, onClose]); + console.log('fileupload model here from file', file, queue, queue.length); + return ( ) => }> @@ -90,17 +246,40 @@ const FileUploadModal = ({ - - - + + {queue.length > 0 && queue.map((file) => )} + + {/* + */} + + {/* */} + {/* {queue.length > 0 && queue.map((file) => )} */} + {/* + + + + + + + + */} + {/* + */} - + {/* {t('Upload_file_name')} {!name && {t('error-the-field-is-required', { field: t('Name') })}} - + */} {showDescription && ( {t('Upload_file_description')} @@ -111,7 +290,14 @@ const FileUploadModal = ({ )} - + + + +