Skip to content

feat: support multi-file drag and drop in File Upload modal #1340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Strxangxl wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat: support multi-file drag and drop in File Upload modal #1340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/react/src/hooks/useDropBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ const useDropBox = () => {
const handleDragDrop = (e) => {
e.preventDefault();
toggle();
setData(e.dataTransfer.files[0]);
setData([...e.dataTransfer.files]);
};

const handlePaste = (file) => {
toggle();
setData(file);
setData([file]);
};

return {
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/store/attachmentwindow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { create } from 'zustand';

const useAttachmentWindowStore = create((set) => ({
attachmentWindowOpen: false,
data: null,
data: [],
toggle: () =>
set((state) => ({ attachmentWindowOpen: !state.attachmentWindowOpen })),
setData: (file) => {
Expand Down
87 changes: 45 additions & 42 deletions packages/react/src/views/AttachmentPreview/AttachmentPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,14 +74,18 @@ const AttachmentPreview = () => {

setIsPending(true);
try {
await RCInstance.sendAttachment(
data,
fileName,
parseEmoji(description),
ECOptions?.enableThreads ? threadId : undefined
);
await Promise.all(
data.map((file) =>
RCInstance.sendAttachment(
file,
file.name,
parseEmoji(description),
ECOptions?.enableThreads ? threadId : undefined
)
)
)
toggle();
setData(null);
setData([]);
} finally {
setIsPending(false);
}
Expand Down Expand Up @@ -112,40 +116,46 @@ const AttachmentPreview = () => {

<Modal.Content>
<Box css={styles.modalContent}>
<Box
css={css`
text-align: center;
margin-top: 1rem;
`}
>
<CheckPreviewType data={data} />
</Box>

{/* 1. THE PARENT ROW: Only handles horizontal scrolling and spacing */}
<Box
css={css`
margin: 30px;
display: flex;
flex-direction: row;
overflow-x: auto;
gap: 1rem;
margin-top: 1rem;
padding-bottom: 1rem;
`}
>
<Box css={styles.inputContainer}>
{data.map((file, index) => (
/* 2. THE LOCAL WRAPPER: Enforces the 200px height limit on each individual item */
<Box
is="span"
key={index}
css={css`
font-weight: 550;
margin-bottom: 0.5rem;
flex: 0 0 auto !important;
height: 200px !important;
width: auto !important;
display: flex !important;
align-items: center;
justify-content: center;

/* Forces the generated image inside to obey the 200px limit */
& img, & > div {
height: 100% !important;
width: auto !important;
max-width: none !important;
object-fit: contain !important;
}
`}
>
File name
<CheckPreviewType data={file} />
</Box>
<Input
onChange={handleFileName}
value={fileName}
type="text"
css={styles.input}
placeholder="name"
/>
<TypingUsers />
</Box>
))}
</Box>

{/* 3. THE RESTORED DESCRIPTION INPUT */}
<Box css={css`margin: 30px;`}>
<Box css={styles.inputContainer}>
<Box
is="span"
Expand Down Expand Up @@ -181,9 +191,7 @@ const AttachmentPreview = () => {
value={description}
css={css`
${styles.input};
border-color: ${isOverLimit
? theme.colors.destructive
: null};
border-color: ${isOverLimit ? theme.colors.destructive : null};
color: ${isOverLimit ? theme.colors.destructive : null};
`}
/>
Expand All @@ -202,9 +210,7 @@ const AttachmentPreview = () => {
>
<Box
css={css`
color: ${isOverLimit
? theme.colors.destructive
: 'transparent'};
color: ${isOverLimit ? theme.colors.destructive : 'transparent'};
font-weight: 500;
text-align: left;
flex: 1 1 auto;
Expand All @@ -215,16 +221,12 @@ const AttachmentPreview = () => {
aria-hidden={!isOverLimit}
role={isOverLimit ? 'alert' : undefined}
>
{isOverLimit
? `Cannot upload file, description is over the ${msgMaxLength} character limit`
: ''}
{isOverLimit ? `Cannot upload file, description is over the ${msgMaxLength} character limit` : ''}
</Box>

<Box
css={css`
color: ${isOverLimit
? theme.colors.destructive
: '#6b7280'};
color: ${isOverLimit ? theme.colors.destructive : '#6b7280'};
min-width: 68px;
text-align: right;
flex: 0 0 auto;
Expand All @@ -238,6 +240,7 @@ const AttachmentPreview = () => {
</Box>
</Box>
</Box>

</Box>
</Modal.Content>

Expand Down