Skip to content

Commit

Permalink
mutiple file share init
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhipatel0211
abhipatel0211 committed Mar 31, 2024
1 parent f438a14 commit 54fcaab
Show file tree
Hide file tree
Showing 2 changed files with 220 additions and 27 deletions.
25 changes: 16 additions & 9 deletions apps/meteor/client/lib/chats/flows/uploadFiles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,50 +7,57 @@ import { prependReplies } from '../../utils/prependReplies';
import type { ChatAPI } from '../ChatAPI';

export const uploadFiles = async (chat: ChatAPI, files: readonly File[], resetFileInput?: () => void): Promise<void> => {
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)),
},
});
};

uploadNextFile();
// }
resetFileInput?.();
};
222 changes: 204 additions & 18 deletions apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -19,6 +35,9 @@ type FileUploadModalProps = {

const FileUploadModal = ({
onClose,
queue = [],
msg,
chat,
file,
fileName,
fileDescription,
Expand All @@ -41,28 +60,163 @@ const FileUploadModal = ({
const handleDescription = (e: ChangeEvent<HTMLInputElement>): void => {
setDescription(e.currentTarget.value);
};
const [que, setQue] = useState<File[]>([]); // Initialize your queue state

const handleSubmit: FormEventHandler<HTMLFormElement> = (e): void => {
const removeFromQue = (fileNameToRemove: string) => {
setQue((prevQue) => prevQue.filter((file) => file.name !== fileNameToRemove));
};
const handleAddfile = () => {
console.log('handleAddfile');
};

const handleSubmit: FormEventHandler<HTMLFormElement> = async (e): Promise<void> => {
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<HTMLFormElement> = (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<HTMLFormElement> = (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({
Expand All @@ -82,6 +236,8 @@ const FileUploadModal = ({
}
}, [file, dispatchToastMessage, invalidContentType, t, onClose]);

console.log('fileupload model here from file', file, queue, queue.length);

return (
<Modal wrapperFunction={(props: ComponentProps<typeof Box>) => <Box is='form' onSubmit={handleSubmit} {...props} />}>
<Box display='flex' flexDirection='column' height='100%'>
Expand All @@ -90,17 +246,40 @@ const FileUploadModal = ({
<Modal.Close onClick={onClose} />
</Modal.Header>
<Modal.Content>
<Box display='flex' maxHeight='x360' w='full' justifyContent='center' alignContent='center' mbe={16}>
<FilePreview file={file} />
</Box>
<Scrollable vertical>
<Tile padding='none'>{queue.length > 0 && queue.map((file) => <FilePreview key={file.name} file={file} />)}</Tile>
</Scrollable>
{/* <Scrollable vertical>
<Tile padding='none' height={100}> */}

{/* <FilePreview key={file.name} file={file} /> */}
{/* {queue.length > 0 && queue.map((file) => <FilePreview key={file.name} file={file} />)} */}
{/* <Box
overflow={'scroll'}
display='flex-col'
justifyContent='center'
alignContent='center'
mbe={16}
style={{ overflowY: 'scroll' }}
>
<FilePreview file={file} />
<FilePreview file={file} />
<FilePreview file={file} />
<FilePreview file={file} />
</Box>
<Box display='flex-col' justifyContent='center' alignContent='center' mbe={16} style={{ overflowY: 'scroll' }}>
<FilePreview file={file} />
</Box> */}
{/* </Tile>
</Scrollable> */}
<FieldGroup>
<Field>
{/* <Field>
<FieldLabel>{t('Upload_file_name')}</FieldLabel>
<FieldRow>
<TextInput value={name} onChange={handleName} />
</FieldRow>
{!name && <FieldError>{t('error-the-field-is-required', { field: t('Name') })}</FieldError>}
</Field>
</Field> */}
{showDescription && (
<Field>
<FieldLabel>{t('Upload_file_description')}</FieldLabel>
Expand All @@ -111,7 +290,14 @@ const FileUploadModal = ({
)}
</FieldGroup>
</Modal.Content>
<Modal.Footer>
<Modal.Footer justifyContent='space-between'>
<Modal.FooterAnnotation>
<Button secondary onClick={handleAddfile} disabled={!name}>
<Icon name='plus-small' size='x20' />
<input style={{ display: 'none' }} onChange={handleAddfile} type='file' id='fileInput' />
Add File
</Button>
</Modal.FooterAnnotation>
<Modal.FooterControllers>
<Button secondary onClick={onClose}>
{t('Cancel')}
Expand Down

0 comments on commit 54fcaab

Please sign in to comment.