feat: show upload modal on file drop

frontend/src/components/upload/Dropzone.tsx

@@ -1,6 +1,6 @@
 import { Button, Center, createStyles, Group, Text } from "@mantine/core";
 import { Dropzone as MantineDropzone } from "@mantine/dropzone";
-import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
+import { ForwardedRef, useRef } from "react";
 import { TbCloudUpload, TbUpload } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
 import useTranslate from "../../hooks/useTranslate.hook";
@@ -35,13 +35,11 @@ const useStyles = createStyles((theme) => ({
 const Dropzone = ({
   isUploading,
   maxShareSize,
-  files,
-  setFiles,
+  showCreateUploadModalCallback,
 }: {
   isUploading: boolean;
   maxShareSize: number;
-  files: FileUpload[];
-  setFiles: Dispatch<SetStateAction<FileUpload[]>>;
+  showCreateUploadModalCallback: (files: FileUpload[]) => void;
 }) => {
   const t = useTranslate();
 
@@ -55,24 +53,21 @@ const Dropzone = ({
         }}
         disabled={isUploading}
         openRef={openRef as ForwardedRef<() => void>}
-        onDrop={(newFiles: FileUpload[]) => {
-          const fileSizeSum = [...newFiles, ...files].reduce(
-            (n, { size }) => n + size,
-            0,
-          );
+        onDrop={(files: FileUpload[]) => {
+          const fileSizeSum = files.reduce((n, { size }) => n + size, 0);
 
           if (fileSizeSum > maxShareSize) {
             toast.error(
               t("upload.dropzone.notify.file-too-big", {
                 maxSize: byteToHumanSizeString(maxShareSize),
-              }),
+              })
             );
           } else {
-            newFiles = newFiles.map((newFile) => {
+            files = files.map((newFile) => {
               newFile.uploadingProgress = 0;
               return newFile;
             });
-            setFiles([...newFiles, ...files]);
+            showCreateUploadModalCallback(files);
           }
         }}
         className={classes.dropzone}

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -26,6 +26,7 @@ import useTranslate, {
   translateOutsideContext,
 } from "../../../hooks/useTranslate.hook";
 import shareService from "../../../services/share.service";
+import { FileUpload } from "../../../types/File.type";
 import { CreateShare } from "../../../types/share.type";
 import { getExpirationPreview } from "../../../utils/date.util";
 
@@ -38,7 +39,8 @@ const showCreateUploadModal = (
     allowUnauthenticatedShares: boolean;
     enableEmailRecepients: boolean;
   },
-  uploadCallback: (createShare: CreateShare) => void,
+  files: FileUpload[],
+  uploadCallback: (createShare: CreateShare, files: FileUpload[]) => void
 ) => {
   const t = translateOutsideContext();
 
@@ -47,6 +49,7 @@ const showCreateUploadModal = (
     children: (
       <CreateUploadModalBody
         options={options}
+        files={files}
         uploadCallback={uploadCallback}
       />
     ),
@@ -55,9 +58,11 @@ const showCreateUploadModal = (
 
 const CreateUploadModalBody = ({
   uploadCallback,
+  files,
   options,
 }: {
-  uploadCallback: (createShare: CreateShare) => void;
+  files: FileUpload[];
+  uploadCallback: (createShare: CreateShare, files: FileUpload[]) => void;
   options: {
     isUserSignedIn: boolean;
     isReverseShare: boolean;
@@ -121,16 +126,19 @@ const CreateUploadModalBody = ({
             const expiration = form.values.never_expires
               ? "never"
               : form.values.expiration_num + form.values.expiration_unit;
-            uploadCallback({
-              id: values.link,
-              expiration: expiration,
-              recipients: values.recipients,
-              description: values.description,
-              security: {
-                password: values.password,
-                maxViews: values.maxViews,
+            uploadCallback(
+              {
+                id: values.link,
+                expiration: expiration,
+                recipients: values.recipients,
+                description: values.description,
+                security: {
+                  password: values.password,
+                  maxViews: values.maxViews,
+                },
               },
-            });
+              files
+            );
             modals.closeAll();
           }
         })}
@@ -152,7 +160,7 @@ const CreateUploadModalBody = ({
                   "link",
                   Buffer.from(Math.random().toString(), "utf8")
                     .toString("base64")
-                    .substr(10, 7),
+                    .substr(10, 7)
                 )
               }
             >
@@ -251,7 +259,7 @@ const CreateUploadModalBody = ({
                     neverExpires: t("upload.modal.completed.never-expires"),
                     expiresOn: t("upload.modal.completed.expires-on"),
                   },
-                  form,
+                  form
                 )}
               </Text>
             </>
@@ -266,7 +274,7 @@ const CreateUploadModalBody = ({
                   <Textarea
                     variant="filled"
                     placeholder={t(
-                      "upload.modal.accordion.description.placeholder",
+                      "upload.modal.accordion.description.placeholder"
                     )}
                     {...form.getInputProps("description")}
                   />
@@ -290,7 +298,7 @@ const CreateUploadModalBody = ({
                       if (!query.match(/^\S+@\S+\.\S+$/)) {
                         form.setFieldError(
                           "recipients",
-                          t("upload.modal.accordion.email.invalid-email"),
+                          t("upload.modal.accordion.email.invalid-email")
                         );
                       } else {
                         form.setFieldError("recipients", null);
@@ -316,7 +324,7 @@ const CreateUploadModalBody = ({
                   <PasswordInput
                     variant="filled"
                     placeholder={t(
-                      "upload.modal.accordion.security.password.placeholder",
+                      "upload.modal.accordion.security.password.placeholder"
                     )}
                     label={t("upload.modal.accordion.security.password.label")}
                     autoComplete="off"
@@ -327,7 +335,7 @@ const CreateUploadModalBody = ({
                     type="number"
                     variant="filled"
                     placeholder={t(
-                      "upload.modal.accordion.security.max-views.placeholder",
+                      "upload.modal.accordion.security.max-views.placeholder"
                     )}
                     label={t("upload.modal.accordion.security.max-views.label")}
                     {...form.getInputProps("maxViews")}
@@ -336,7 +344,7 @@ const CreateUploadModalBody = ({
               </Accordion.Panel>
             </Accordion.Item>
           </Accordion>
-          <Button type="submit">
+          <Button type="submit" data-autofocus>
             <FormattedMessage id="common.button.share" />
           </Button>
         </Stack>

frontend/src/pages/upload/index.tsx

@@ -40,7 +40,7 @@ const Upload = ({
 
   maxShareSize ??= parseInt(config.get("share.maxSize"));
 
-  const uploadFiles = async (share: CreateShare) => {
+  const uploadFiles = async (share: CreateShare, files: FileUpload[]) => {
     setisUploading(true);
     createdShare = await shareService.create(share);
 
@@ -56,7 +56,7 @@ const Upload = ({
                 file.uploadingProgress = progress;
               }
               return file;
-            }),
+            })
           );
         };
 
@@ -84,7 +84,7 @@ const Upload = ({
                       name: file.name,
                     },
                     chunkIndex,
-                    chunks,
+                    chunks
                   )
                   .then((response) => {
                     fileId = response.id;
@@ -114,16 +114,34 @@ const Upload = ({
             }
           }
         }
-      }),
+      })
     );
 
     Promise.all(fileUploadPromises);
   };
 
+  const showCreateUploadModalCallback = (files: FileUpload[]) => {
+    setFiles(files);
+    showCreateUploadModal(
+      modals,
+      {
+        isUserSignedIn: user ? true : false,
+        isReverseShare,
+        appUrl: config.get("general.appUrl"),
+        allowUnauthenticatedShares: config.get(
+          "share.allowUnauthenticatedShares"
+        ),
+        enableEmailRecepients: config.get("email.enableShareEmailRecipients"),
+      },
+      files,
+      uploadFiles
+    );
+  };
+
   useEffect(() => {
     // Check if there are any files that failed to upload
     const fileErrorCount = files.filter(
-      (file) => file.uploadingProgress == -1,
+      (file) => file.uploadingProgress == -1
     ).length;
 
     if (fileErrorCount > 0) {
@@ -133,7 +151,7 @@ const Upload = ({
           {
             withCloseButton: false,
             autoClose: false,
-          },
+          }
         );
       }
       errorToastShown = true;
@@ -166,31 +184,14 @@ const Upload = ({
         <Button
           loading={isUploading}
           disabled={files.length <= 0}
-          onClick={() => {
-            showCreateUploadModal(
-              modals,
-              {
-                isUserSignedIn: user ? true : false,
-                isReverseShare,
-                appUrl: config.get("general.appUrl"),
-                allowUnauthenticatedShares: config.get(
-                  "share.allowUnauthenticatedShares",
-                ),
-                enableEmailRecepients: config.get(
-                  "email.enableShareEmailRecipients",
-                ),
-              },
-              uploadFiles,
-            );
-          }}
+          onClick={() => showCreateUploadModalCallback(files)}
         >
           <FormattedMessage id="common.button.share" />
         </Button>
       </Group>
       <Dropzone
         maxShareSize={maxShareSize}
-        files={files}
-        setFiles={setFiles}
+        showCreateUploadModalCallback={showCreateUploadModalCallback}
         isUploading={isUploading}
       />
       {files.length > 0 && <FileList files={files} setFiles={setFiles} />}