Text editor image upload ported to new medialit api

Author: Rajat Saxena

packages/components-library/src/media-selector/file-upload-dialog.tsx

@@ -175,15 +175,6 @@ export function FileUploadAlertDialog({
         }
     };
 
-    const getMedia = async (mediaId: string) => {
-        const fetch = new FetchBuilder()
-            .setUrl(`${address.backend}/api/media/${mediaId}/${type}`)
-            .setHttpMethod("GET")
-            .setIsGraphQLEndpoint(false)
-            .build();
-        return await fetch.exec();
-    };
-
     const handleReset = () => {
         if (uploadRef.current) {
             uploadRef.current.abort();

packages/text-editor/src/extensions.ts

@@ -3,7 +3,6 @@ import {
     DocExtension,
     DropCursorExtension,
     HeadingExtension,
-    ImageAttributes,
     ImageExtension,
     LinkExtension,
     OrderedListExtension,
@@ -30,75 +29,7 @@ import { CodeMirrorExtension } from "@remirror/extension-codemirror6";
 import { TableExtension } from "@remirror/extension-react-tables";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { basicSetup } from "codemirror";
-import { DelayedPromiseCreator, ErrorConstant, invariant } from "remirror";
-import { FetchBuilder } from "@courselit/utils";
-import { Media } from "@courselit/common-models";
-
-// const wysiwygPresetArrayWithoutImageExtension = wysiwygPreset().filter(
-//     (extension) => extension instanceof ImageExtension !== true,
-// );
-
-type SetProgress = (progress: number) => void;
-
-interface FileWithProgress {
-    file: File;
-    progress: SetProgress;
-}
-
-async function getPresignedUrl(url: string) {
-    const fetch = new FetchBuilder()
-        .setUrl(`${url}/api/media/presigned`)
-        .setIsGraphQLEndpoint(false)
-        .build();
-    const response = await fetch.exec();
-    return response.url;
-}
-
-function getUploadHandler(url: string) {
-    return function uploadFileToMediaLit(
-        files: FileWithProgress[],
-    ): DelayedPromiseCreator<ImageAttributes>[] {
-        invariant(files.length > 0, {
-            code: ErrorConstant.EXTENSION,
-            message:
-                "The upload handler was applied for the image extension without any valid files",
-        });
-
-        let completed = 0;
-        const promises: DelayedPromiseCreator<ImageAttributes>[] = [];
-
-        for (const { file, progress } of files) {
-            promises.push(
-                () =>
-                    new Promise<ImageAttributes>((resolve, reject) => {
-                        getPresignedUrl(url)
-                            .then((presignedUrl) => {
-                                const fD = new FormData();
-                                fD.append("caption", file.name);
-                                fD.append("access", "public");
-                                fD.append("file", file);
-
-                                return fetch(presignedUrl, {
-                                    method: "POST",
-                                    body: fD,
-                                });
-                            })
-                            .then((data) => data.json())
-                            .then((data: Media) => {
-                                completed += 1;
-                                progress(completed / files.length);
-                                resolve({
-                                    src: data.file,
-                                    fileName: data.originalFileName,
-                                });
-                            })
-                            .catch((err) => reject(err));
-                    }),
-            );
-        }
-        return promises;
-    };
-}
+import { getUploadHandler } from "./file-upload-extention";
 
 export const getExtensions = (placeholder, url) => () => [
     new DocExtension({}),
@@ -143,5 +74,4 @@ export const getExtensions = (placeholder, url) => () => [
     new OrderedListExtension(),
     new TaskListExtension(),
     new ShortcutsExtension(),
-    //    ...wysiwygPresetArrayWithoutImageExtension,
 ];

packages/text-editor/src/file-upload-extention.ts

@@ -0,0 +1,72 @@
+import { DelayedPromiseCreator, ErrorConstant, invariant } from "remirror";
+import { FetchBuilder } from "@courselit/utils";
+import { Media } from "@courselit/common-models";
+import { ImageAttributes } from "remirror/extensions";
+
+type SetProgress = (progress: number) => void;
+
+interface FileWithProgress {
+    file: File;
+    progress: SetProgress;
+}
+
+async function getPresignedUrl(url: string) {
+    const fetch = new FetchBuilder()
+        .setUrl(`${url}/api/media/presigned`)
+        .setIsGraphQLEndpoint(false)
+        .build();
+    return await fetch.exec();
+}
+
+export function getUploadHandler(url: string) {
+    return function uploadFileToMediaLit(
+        files: FileWithProgress[],
+    ): DelayedPromiseCreator<ImageAttributes>[] {
+        invariant(files.length > 0, {
+            code: ErrorConstant.EXTENSION,
+            message:
+                "The upload handler was applied for the image extension without any valid files",
+        });
+
+        let completed = 0;
+        const promises: DelayedPromiseCreator<ImageAttributes>[] = [];
+
+        for (const { file, progress } of files) {
+            promises.push(
+                () =>
+                    new Promise<ImageAttributes>((resolve, reject) => {
+                        if (file.size > 2097152) {
+                            // 2 MB (taken from: https://stackoverflow.com/a/49490014)
+                            return reject("File is larger than 2MB");
+                        }
+                        getPresignedUrl(url)
+                            .then(({ signature, endpoint }) => {
+                                const fD = new FormData();
+                                fD.append("caption", file.name);
+                                fD.append("access", "public");
+                                fD.append("file", file);
+
+                                return fetch(`${endpoint}/media/create`, {
+                                    method: "POST",
+                                    headers: {
+                                        "x-medialit-signature": signature,
+                                    },
+                                    body: fD,
+                                });
+                            })
+                            .then((data) => data.json())
+                            .then((data: Media) => {
+                                completed += 1;
+                                progress(completed / files.length);
+                                resolve({
+                                    src: data.file,
+                                    fileName: data.originalFileName,
+                                });
+                            })
+                            .catch((err) => reject(err.message));
+                    }),
+            );
+        }
+        return promises;
+    };
+}