feat: add hosting for post feature image (freeCodeCamp#354)

Co-authored-by: yoko <[email protected]>
sidemt · Nov 27, 2023 · 2f7c227 · 2f7c227
1 parent 9a11144
commit 2f7c227
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 33 deletions.
diff --git a/apps/backend/config/middlewares.js b/apps/backend/config/middlewares.js
@@ -7,16 +7,6 @@ module.exports = [
   "strapi::query",
   "strapi::session",
   "strapi::favicon",
+  "strapi::body",
   "strapi::public",
-  {
-    name: "strapi::body",
-    config: {
-      formLimit: "256mb",
-      jsonLimit: "256mb",
-      textLimit: "256mb",
-      formidable: {
-        maxFileSize: 250 * 1024 * 1024,
-      },
-    },
-  },
 ];
diff --git a/apps/backend/config/plugins.js b/apps/backend/config/plugins.js
diff --git a/apps/backend/package.json b/apps/backend/package.json
@@ -22,7 +22,6 @@
     "@strapi/plugin-i18n": "4.15.4",
     "@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",

diff --git a/apps/frontend/src/components/editor-drawer.jsx b/apps/frontend/src/components/editor-drawer.jsx
@@ -44,10 +44,12 @@ const EditorDrawer = ({
   postUrl,
   postTagId,
   title,
+  featureImage,
   handleUnsavedChanges,
   handlePostTagId,
   handleAuthorChange,
   handlePostUrlChange,
+  handleFeatureImageChange,
   handleSubmit,
 }) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
@@ -62,8 +64,6 @@ const EditorDrawer = ({
 
   const [authorName, setAuthorName] = useState("");
 
-  const [featureImage, setFeatureImage] = useState("");
-
   useEffect(() => {
     if (post) {
       const { tags } = post.attributes;
@@ -80,9 +80,30 @@ const EditorDrawer = ({
     }
   }, [post, handlePostTagId]);
 
-  const handleFileInputChange = (event) => {
+  const handleFileInputChange = async (event) => {
     const file = event.target.files[0];
-    setFeatureImage(URL.createObjectURL(file));
+
+    if (!file) return;
+
+    const apiBase = process.env.NEXT_PUBLIC_STRAPI_BACKEND_URL;
+
+    const formData = new FormData();
+    formData.append("files", file);
+
+    const response = await fetch(new URL("api/upload", apiBase), {
+      method: "post",
+      body: formData,
+      headers: {
+        Accept: "application/json",
+        Authorization: `Bearer ${user.jwt}`,
+      },
+    });
+
+    if (response.status === 200) {
+      const data = await response.json();
+
+      handleFeatureImageChange(new URL(data[0].url, apiBase), data[0].id);
+    }
   };
 
   function addTag(tagName, tagSlug) {
@@ -237,7 +258,7 @@ const EditorDrawer = ({
               <Button
                 colorScheme="red"
                 w="100%"
-                onClick={() => setFeatureImage(null)}
+                onClick={() => handleFeatureImageChange(null, null)}
               >
                 Delete Image
               </Button>

diff --git a/apps/frontend/src/components/post-form.jsx b/apps/frontend/src/components/post-form.jsx
@@ -41,9 +41,13 @@ const PostForm = ({ tags, user, authors, post }) => {
 
   const [unsavedChanges, setUnsavedChanges] = useState(false);
 
+  const [featureImage, setFeatureImageUrl] = useState();
+  const [featureImageId, setFeatureImageId] = useState();
+
   useEffect(() => {
     if (post) {
-      const { title, body, slug, tags } = post.attributes;
+      const apiBase = process.env.NEXT_PUBLIC_STRAPI_BACKEND_URL;
+      const { title, body, slug, tags, feature_image } = post.attributes;
       const tagIds = tags.data.map((tag) => tag.id);
 
       setTitle(title);
@@ -52,6 +56,13 @@ const PostForm = ({ tags, user, authors, post }) => {
       setPostUrl(slug ?? "");
       setPostId(post.id);
       setPostTagId(tagIds);
+
+      if (feature_image.data) {
+        setFeatureImageUrl(
+          new URL(feature_image.data[0].attributes.url, apiBase),
+        );
+        setFeatureImageId(feature_image.data[0].id);
+      }
     }
   }, [post]);
 
@@ -79,6 +90,12 @@ const PostForm = ({ tags, user, authors, post }) => {
     setUnsavedChanges(true);
   };
 
+  const handleFeatureImageChange = (url, id) => {
+    setFeatureImageUrl(url);
+    setFeatureImageId(id);
+    setUnsavedChanges(true);
+  };
+
   const handleSubmit = useCallback(
     async (shouldPublish = null, scheduledDate = "", scheduledTime = "") => {
       const nonce = uuidv4();
@@ -87,6 +104,7 @@ const PostForm = ({ tags, user, authors, post }) => {
       const data = {
         data: {
           title: title,
+          feature_image: featureImageId !== null ? [featureImageId] : [],
           slug: slugify(
             postUrl != "" ? postUrl : title != "(UNTITLED)" ? title : nonce,
             {
@@ -162,7 +180,17 @@ const PostForm = ({ tags, user, authors, post }) => {
         });
       }
     },
-    [toast, title, postUrl, postTagId, content, author, postId, user],
+    [
+      toast,
+      title,
+      postUrl,
+      postTagId,
+      featureImageId,
+      content,
+      author,
+      postId,
+      user,
+    ],
   );
 
   useEffect(() => {
@@ -246,10 +274,12 @@ const PostForm = ({ tags, user, authors, post }) => {
                 postTagId={postTagId}
                 title={title}
                 postUrl={postUrl}
+                featureImage={featureImage}
                 handleTitleChange={handleTitleChange}
                 handlePostUrlChange={handlePostUrlChange}
                 handleAuthorChange={handleAuthorChange}
                 handleUnsavedChanges={handleUnsavedChanges}
+                handleFeatureImageChange={handleFeatureImageChange}
                 handlePostTagId={handlePostTagId}
                 handleSubmit={handleSubmit}
               />

diff --git a/apps/frontend/src/components/tiptap.jsx b/apps/frontend/src/components/tiptap.jsx
@@ -58,7 +58,7 @@ function ToolBar({ editor, user }) {
     const apiBase = process.env.NEXT_PUBLIC_STRAPI_BACKEND_URL;
 
     const formData = new FormData();
-    const image = document.getElementById("feature-image").files;
+    const image = document.getElementById("add-image").files;
 
     // Handle the case where the user opts not to submit an image.
     if (!image) return;
@@ -214,7 +214,7 @@ function ToolBar({ editor, user }) {
         leftIcon={<FontAwesomeIcon icon={faListOl} />}
       />
       <div className="vl"></div>
-      <label htmlFor="feature-image" className="custom-file-upload">
+      <label htmlFor="add-image" className="custom-file-upload">
         <Button
           type="button"
           variant="ghost"
@@ -223,13 +223,13 @@ function ToolBar({ editor, user }) {
           title="Add an image"
           aria-label="Add an image"
           leftIcon={<FontAwesomeIcon icon={faImage} />}
-          onClick={() => document.getElementById("feature-image").click()}
+          onClick={() => document.getElementById("add-image").click()}
         />
       </label>
       <form id="choose-image-form" onChange={handleImageSubmit}>
         <input
           type="file"
-          id="feature-image"
+          id="add-image"
           accept="image/*"
           style={{ display: "none" }}
         />{" "}

diff --git a/package-lock.json b/package-lock.json