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={}
/>
-