From 2f7c2275724c3de70d2e1f0abe65331add1088bd Mon Sep 17 00:00:00 2001 From: Sem Bauke Date: Mon, 27 Nov 2023 17:47:49 +0100 Subject: [PATCH] feat: add hosting for post feature image (#354) Co-authored-by: yoko <25644062+sidemt@users.noreply.github.com> --- apps/backend/config/middlewares.js | 12 +------ apps/backend/config/plugins.js | 9 ----- apps/backend/package.json | 1 - .../frontend/src/components/editor-drawer.jsx | 31 ++++++++++++++--- apps/frontend/src/components/post-form.jsx | 34 +++++++++++++++++-- apps/frontend/src/components/tiptap.jsx | 8 ++--- package-lock.json | 1 - 7 files changed, 63 insertions(+), 33 deletions(-) delete mode 100644 apps/backend/config/plugins.js diff --git a/apps/backend/config/middlewares.js b/apps/backend/config/middlewares.js index 077124c4e..c69b88b1f 100644 --- 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 deleted file mode 100644 index b86c0907c..000000000 --- a/apps/backend/config/plugins.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = () => ({ - upload: { - config: { - provider: "local", - // 250MB - sizeLimit: 250 * 1024 * 1024, - }, - }, -}); diff --git a/apps/backend/package.json b/apps/backend/package.json index a4224f6a7..f7b714a2a 100644 --- 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 index 26405d04a..8a462ff2e 100644 --- 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 = ({ diff --git a/apps/frontend/src/components/post-form.jsx b/apps/frontend/src/components/post-form.jsx index 43850b3cc..a1005923f 100644 --- 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 index 440aa9f83..29a6e88bc 100644 --- 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={} />
-