wip uploadhandler

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -298,64 +298,70 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
    * the upload event handler
    * @param {any} file
    */
-  const uploadHandler = useCallback(async(file) => {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let res: any = await apiGet('/attachments.limit', {
-        fileSize: file.size,
-      });
-
-      if (!res.isUploadable) {
-        throw new Error(res.errorMessage);
-      }
-
-      const formData = new FormData();
-      // const { pageId, path } = pageContainer.state;
-      formData.append('file', file);
-      if (currentPagePath != null) {
-        formData.append('path', currentPagePath);
+  const uploadHandler = useCallback((args: File | File[]) => {
+    const files = Array.isArray(args)
+      ? args
+      : [args];
+
+    files.forEach(async(file) => {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let res: any = await apiGet('/attachments.limit', {
+          fileSize: file.size,
+        });
+
+        if (!res.isUploadable) {
+          throw new Error(res.errorMessage);
+        }
+
+        const formData = new FormData();
+        // const { pageId, path } = pageContainer.state;
+        formData.append('file', file);
+        if (currentPagePath != null) {
+          formData.append('path', currentPagePath);
+        }
+        if (pageId != null) {
+          formData.append('page_id', pageId);
+        }
+        if (pageId == null) {
+          formData.append('page_body', codeMirrorEditor?.getDoc() ?? '');
+        }
+
+        res = await apiPostForm('/attachments.add', formData);
+        const attachment = res.attachment;
+        const fileName = attachment.originalName;
+
+        let insertText = `[${fileName}](${attachment.filePathProxied})`;
+        // when image
+        if (attachment.fileFormat.startsWith('image/')) {
+        // modify to "![fileName](url)" syntax
+          insertText = `!${insertText}`;
+        }
+        // TODO: implement
+        // refs: https://redmine.weseek.co.jp/issues/126528
+        // editorRef.current.insertText(insertText);
+
+        // when if created newly
+        // Not using 'mutateGrant' to inherit the grant of the parent page
+        if (res.pageCreated) {
+          logger.info('Page is created', res.page._id);
+          globalEmitter.emit('resetInitializedHackMdStatus');
+          mutateIsLatestRevision(true);
+          setCreatedPageRevisionIdWithAttachment(res.page.revision);
+          await mutateCurrentPageId(res.page._id);
+          await mutateCurrentPage();
+        }
       }
-      if (pageId != null) {
-        formData.append('page_id', pageId);
+      catch (e) {
+        logger.error('failed to upload', e);
+        toastError(e);
       }
-      if (pageId == null) {
-        formData.append('page_body', codeMirrorEditor?.getDoc() ?? '');
+      finally {
+        codeMirrorEditor?.insertText(insertText);
       }
 
-      res = await apiPostForm('/attachments.add', formData);
-      const attachment = res.attachment;
-      const fileName = attachment.originalName;
+    });
 
-      let insertText = `[${fileName}](${attachment.filePathProxied})`;
-      // when image
-      if (attachment.fileFormat.startsWith('image/')) {
-        // modify to "![fileName](url)" syntax
-        insertText = `!${insertText}`;
-      }
-      // TODO: implement
-      // refs: https://redmine.weseek.co.jp/issues/126528
-      // editorRef.current.insertText(insertText);
-
-      // when if created newly
-      // Not using 'mutateGrant' to inherit the grant of the parent page
-      if (res.pageCreated) {
-        logger.info('Page is created', res.page._id);
-        globalEmitter.emit('resetInitializedHackMdStatus');
-        mutateIsLatestRevision(true);
-        setCreatedPageRevisionIdWithAttachment(res.page.revision);
-        await mutateCurrentPageId(res.page._id);
-        await mutateCurrentPage();
-      }
-    }
-    catch (e) {
-      logger.error('failed to upload', e);
-      toastError(e);
-    }
-    finally {
-      // TODO: implement
-      // refs: https://redmine.weseek.co.jp/issues/126528
-      // editorRef.current.terminateUploadingState();
-    }
   }, [codeMirrorEditor, currentPagePath, mutateCurrentPage, mutateCurrentPageId, mutateIsLatestRevision, pageId]);
 
 

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -25,7 +25,7 @@ const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   onChange?: (value: string) => void,
-  onUpload?: (file: any) => Promise<void>,
+  onUpload?: (args: File | File[]) => void,
   indentSize?: number,
 }
 
@@ -68,11 +68,11 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [codeMirrorEditor, indentSize]);
 
   // ------------------------| Dropzone |------------------------------------------
-  const dropHandler = useCallback((accepted) => {
+  const dropHandler = useCallback((acceptedFiles: File[]) => {
     if (onUpload == null) {
       return;
     }
-    accepted.forEach(file => onUpload(file));
+    onUpload(acceptedFiles);
   }, [onUpload]);
 
   const { getRootProps, open } = useDropzone(

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -17,7 +17,7 @@ const additionalExtensions: Extension[] = [
 type Props = {
   onChange?: (value: string) => void,
   onSave?: () => void,
-  onUpload?: () => void,
+  onUpload?: (args: File | File[]) => void,
   indentSize?: number,
 }