file upload to markdown: better error handling and refactoring

Author: williamstein

src/packages/frontend/editors/slate/upload.tsx

@@ -9,7 +9,6 @@ import { useEffect, useMemo, useRef } from "react";
 import { Dropzone, BlobUpload } from "@cocalc/frontend/file-upload";
 import { getFocus } from "./format/commands";
 import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
-import { BASE_URL } from "@cocalc/frontend/misc";
 
 export default function useUpload(
   editor: SlateEditor,
@@ -59,33 +58,38 @@ export default function useUpload(
   // depends on in a ref and only create it once.
   const updloadEventHandlers = useMemo(() => {
     return {
+      error: (_, message) => {
+        actions.set_error(`${message}`);
+      },
       sending: ({ name }) => {
         actionsRef.current?.set_status?.(`Uploading ${name}...`);
       },
       complete: (file) => {
         actionsRef.current?.set_status?.("");
-        const { uuid } = JSON.parse(file.xhr.responseText);
-        const url = `${BASE_URL}/blobs/${encodeURIComponent(
-          file.upload.filename,
-        )}?uuid=${uuid}`;
+        const { url } = file;
+        if (!url) {
+          // probably an error
+          return;
+        }
         let node;
-        if (!file.type.includes("image")) {
+        const { dataURL, height, upload } = file;
+        if (!height && !dataURL?.startsWith("data:image")) {
           node = {
             type: "link",
             isInline: true,
-            children: [{ text: file.name }],
+            children: [{ text: upload.filename ? upload.filename : "file" }],
             url,
-          };
+          } as const;
         } else {
           node = {
             type: "image",
             isInline: true,
             isVoid: true,
             src: url,
             children: [{ text: "" }],
-          };
+          } as const;
         }
-        Transforms.insertFragment(editor, [node as any], {
+        Transforms.insertFragment(editor, [node], {
           at: getFocus(editor),
         });
       },

src/packages/frontend/file-upload.tsx

@@ -26,6 +26,8 @@ import { join } from "path";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
 import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
 import { Button } from "antd";
+import { BASE_URL } from "@cocalc/frontend/misc";
+import { MAX_BLOB_SIZE } from "@cocalc/util/db-schema/blobs";
 
 // 3GB upload limit --  since that's the default filesystem quota
 // and it should be plenty?
@@ -309,7 +311,9 @@ export const FileUploadWrapper: React.FC<FileUploadWrapperProps> = (props) => {
       props.on_close();
     }
     if (remove_all && dropzone.current != null) {
-      dropzone.current.removeAllFiles();
+      try {
+        dropzone.current.removeAllFiles();
+      } catch (_) {}
     }
     set_files([]);
   }
@@ -534,8 +538,29 @@ export function BlobUpload(props) {
   return (
     <FileUploadWrapper
       {...props}
+      event_handlers={{
+        ...props.event_handlers,
+        sending: props.event_handlers?.sending,
+        removedfile: props.event_handlers?.removedfile,
+        complete: (file) => {
+          if (file.xhr?.responseText) {
+            const { uuid } = JSON.parse(file.xhr.responseText);
+            const url = `${BASE_URL}/blobs/${encodeURIComponent(
+              file.upload.filename,
+            )}?uuid=${uuid}`;
+            props.event_handlers?.complete({ ...file, uuid, url });
+          } else {
+            // e.g., if there was an error
+            props.event_handlers?.complete(file);
+          }
+        },
+      }}
       dest_path={""}
-      config={{ url, ...props.config }}
+      config={{
+        url,
+        maxFilesize: MAX_BLOB_SIZE / (1000 * 1000),
+        ...props.config,
+      }}
     />
   );
 }