feat: upload images from fs not URLs (#335)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: sidemt <25644062+sidemt@users.noreply.github.com>

apps/backend/config/middlewares.js

@@ -5,8 +5,18 @@ module.exports = [
   "strapi::poweredBy",
   "strapi::logger",
   "strapi::query",
-  "strapi::body",
   "strapi::session",
   "strapi::favicon",
   "strapi::public",
+  {
+    name: "strapi::body",
+    config: {
+      formLimit: "256mb",
+      jsonLimit: "256mb",
+      textLimit: "256mb",
+      formidable: {
+        maxFileSize: 250 * 1024 * 1024,
+      },
+    },
+  },
 ];

apps/backend/config/plugins.js

@@ -0,0 +1,9 @@
+module.exports = () => ({
+  upload: {
+    config: {
+      provider: "local",
+      // 250MB
+      sizeLimit: 250 * 1024 * 1024,
+    },
+  },
+});

apps/backend/package.json

@@ -22,6 +22,7 @@
     "@strapi/plugin-i18n": "4.15.0",
     "@strapi/plugin-users-permissions": "4.15.4",
     "@strapi/provider-email-nodemailer": "^4.12.4",
+    "@strapi/provider-upload-local": "^4.15.4",
     "@strapi/strapi": "4.15.4",
     "nanoid": "^3.3.6",
     "pg": "^8.11.3",

apps/frontend/src/components/tiptap.jsx

@@ -26,21 +26,12 @@ import Placeholder from "@tiptap/extension-placeholder";
 import Link from "@tiptap/extension-link";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { useCallback } from "react";
 import Youtube from "@tiptap/extension-youtube";
 import { Markdown } from "tiptap-markdown";
 import Code from "@tiptap/extension-code";
 import CharacterCount from "@tiptap/extension-character-count";
 
-function ToolBar({ editor }) {
-  const addImage = useCallback(() => {
-    const url = window.prompt("URL");
-
-    if (url) {
-      editor.chain().focus().setImage({ src: url, alt: "" }).run();
-    }
-  }, [editor]);
-
+function ToolBar({ editor, user }) {
   const addYoutubeEmbed = () => {
     const url = window.prompt("URL");
 
@@ -61,6 +52,35 @@ function ToolBar({ editor }) {
     }
   };
 
+  const handleImageSubmit = async (event) => {
+    event.preventDefault();
+
+    const apiBase = process.env.NEXT_PUBLIC_STRAPI_BACKEND_URL;
+
+    const formData = new FormData();
+    const image = document.getElementById("feature-image").files;
+
+    // Handle the case where the user opts not to submit an image.
+    if (!image) return;
+    formData.append("files", image[0]);
+
+    const res = await fetch(new URL("api/upload", apiBase), {
+      method: "post",
+      headers: {
+        Accept: "application/json",
+        Authorization: `Bearer ${user.jwt}`,
+      },
+      body: formData,
+    });
+
+    const data = await res.json();
+
+    editor.commands.setImage({
+      src: new URL(data[0].url, apiBase),
+      alt: "image",
+    });
+  };
+
   return (
     <Box
       display="flex"
@@ -194,15 +214,26 @@ function ToolBar({ editor }) {
         leftIcon={<FontAwesomeIcon icon={faListOl} />}
       />
       <div className="vl"></div>
-      <Button
-        variant="ghost"
-        iconSpacing={0}
-        p={2}
-        title="add an image"
-        aria-label="add an image"
-        leftIcon={<FontAwesomeIcon icon={faImage} />}
-        onClick={() => addImage()}
-      />
+      <label htmlFor="feature-image" className="custom-file-upload">
+        <Button
+          type="button"
+          variant="ghost"
+          iconSpacing={0}
+          p={2}
+          title="Add an image"
+          aria-label="Add an image"
+          leftIcon={<FontAwesomeIcon icon={faImage} />}
+          onClick={() => document.getElementById("feature-image").click()}
+        />
+      </label>
+      <form id="choose-image-form" onChange={handleImageSubmit}>
+        <input
+          type="file"
+          id="feature-image"
+          accept="image/*"
+          style={{ display: "none" }}
+        />{" "}
+      </form>
       <Menu>
         <MenuButton
           as={Button}
@@ -230,7 +261,7 @@ function ToolBar({ editor }) {
   );
 }
 
-const Tiptap = ({ handleContentChange, content }) => {
+const Tiptap = ({ handleContentChange, user, content }) => {
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
@@ -249,6 +280,9 @@ const Tiptap = ({ handleContentChange, content }) => {
       }),
       Image.configure({
         inline: true,
+        HTMLAttributes: {
+          class: "add-image-form",
+        },
       }),
       Youtube.configure({
         width: 480,
@@ -283,7 +317,7 @@ const Tiptap = ({ handleContentChange, content }) => {
 
   return (
     <>
-      <ToolBar editor={editor} />
+      <ToolBar editor={editor} user={user} />
       <Prose>
         <EditorContent editor={editor} />
       </Prose>

apps/frontend/src/styles/globals.css

@@ -47,3 +47,8 @@
   height: 2rem;
   margin: 0 0.5rem;
 }
+
+.add-image-form {
+  width: 40%;
+  height: 40%;
+}