remove formidable

client/components/realmoji/realmoji.tsx

@@ -21,7 +21,7 @@ export default function Realmoji({ emoji, realmoji }: RealmojiProperties) {
     let [failure, setFailure] = useState<boolean>(false);
     const [selectedFile, setSelectedFile]: any = useState();
     const [isFilePicked, setIsFilePicked] = useState(false);
-    const [fileBase64, setFileBase64] = useState<any>('');
+    const [fileBase64, setFileBase64] = useState('');
 
     function getBase64(file: any) {
         return new Promise(resolve => {
@@ -57,9 +57,31 @@ export default function Realmoji({ emoji, realmoji }: RealmojiProperties) {
 
         let authorization_token = localStorage.getItem("token");
 
-        const formData = new FormData();
-        /* formData.append('primary', selectedFileOne);
-        formData.append('secondary', selectedFileTwo); */
+        fetch("/api/add/realmoji", {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                token: authorization_token,
+                fileBase64: fileBase64,
+                emoji: emoji
+            })
+        }).then((response) => {
+            console.log(response);
+            if (response.ok) {
+                setLoading(false);
+                setSuccess(true);
+                setTimeout(() => { setSuccess(false); router.reload()}, 5000);
+            } else { throw new Error("Error: " + response.statusText); }
+        }).catch((error) => {
+            console.log(error);
+            setLoading(false);
+            setFailure(true)
+            setTimeout(() => { setFailure(false) }, 5000);
+        })
+
+        /* const formData = new FormData();
         formData.append('fileBase64', fileBase64);
         formData.append('token', authorization_token!);
         formData.append('emoji', emoji);
@@ -86,7 +108,7 @@ export default function Realmoji({ emoji, realmoji }: RealmojiProperties) {
                 setFailure(true)
                 setTimeout(() => { setFailure(false) }, 5000);
             }
-        )
+        ) */
     }
 
     return (

client/pages/api/add/post.ts

@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
 import axios from 'axios'
-import { File } from "formidable";
-import formidable, { IncomingForm } from "formidable";
+/* import { File } from "formidable";
+import formidable, { IncomingForm } from "formidable"; */
 import Jimp from "jimp";
 import fs from "fs";
 import sharp from 'sharp';
@@ -13,10 +13,11 @@ import { PROXY } from '@/utils/constants';
 
 export const config = {
     api: {
-        bodyParser: false
+        bodyParser: { sizeLimit: '12mb', },
     }
 };
 
+/*
 export type FormidableParseReturn = {
     fields: formidable.Fields;
     files: formidable.Files;
@@ -35,18 +36,27 @@ export async function parseFormAsync(req: NextApiRequest, formidableOptions?: fo
         });
     });
 }
+*/
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-
+    console.log("POST REQUEST");
     try {
 
+        /* 
         const { fields, files } = await parseFormAsync(req);
-        /* console.log(fields, files) */
+        console.log(fields, files)
 
         let caption: string = fields["caption"] as string;
         let authorization_token: string = fields["token"] as string;
         let primaryb64: string = fields["primaryb64"][0] as string;
-        let secondaryb64: string = fields["secondaryb64"][0] as string;
+        let secondaryb64: string = fields["secondaryb64"][0] as string; 
+        */
+
+        // using fetch
+        let caption: string = req.body.caption;
+        let authorization_token: string = req.body.token;
+        let primaryb64: string = req.body.primaryb64;
+        let secondaryb64: string = req.body.secondaryb64;
 
         // log the first 20 chars of the base64 string
         console.log("BASE64 STRINGS 40 chars");

client/pages/api/add/realmoji.ts

@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
 import axios from 'axios'
-import { File } from "formidable";
-import formidable, { IncomingForm } from "formidable";
+/* import { File } from "formidable";
+import formidable, { IncomingForm } from "formidable"; */
 import Jimp from "jimp";
 import fs from "fs";
 import sharp from 'sharp';
@@ -10,11 +10,11 @@ import { getAuthHeaders } from '@/utils/authHeaders';
 
 export const config = {
     api: {
-        bodyParser: false
+        bodyParser: { sizeLimit: '12mb', },
     }
 };
 
-export type FormidableParseReturn = {
+/* export type FormidableParseReturn = {
     fields: formidable.Fields;
     files: formidable.Files;
 };
@@ -31,18 +31,25 @@ export async function parseFormAsync(req: NextApiRequest, formidableOptions?: fo
             resolve({ fields, files });
         });
     });
-}
+} */
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
 
     try {
 
+        /*
         const { fields, files } = await parseFormAsync(req);
-        /* console.log(fields, files) */
+        console.log(fields, files)
 
         let authorization_token: string = fields["token"] as string;
         let filebase64: string = fields["fileBase64"][0] as string;
-        let emoji: string = fields["emoji"] as string;
+        let emoji: string = fields["emoji"] as string; 
+        */
+
+        // using fetch
+        let authorization_token: string = req.body.token;
+        let filebase64: string = req.body.fileBase64;
+        let emoji: string = req.body.emoji;
 
         console.log("emoji");
         console.log(emoji);

client/pages/post/index.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-
 import s from './post.module.scss'
 import axios from "axios";
 import useCheck from "@/utils/check";
@@ -21,7 +20,7 @@ export default function Post() {
     const [isFirstFilePicked, setIsFirstFilePicked] = useState(false);
     const [isSecondFilePicked, setIsSecondFilePicked] = useState(false);
 
-    const [primarybase64, setPrimaryBase64] = useState<any>('');
+    const [primarybase64, setPrimaryBase64] = useState('');
     const [secondarybase64, setSecondaryBase64] = useState('');
 
     function getBase64(file: any) {
@@ -61,29 +60,56 @@ export default function Post() {
     };
 
     function handleSubmission() {
-
         setLoading(true);
 
-        /* console.log("BASE64");
-        console.log(primarybase64);
-        console.log(secondarybase64); */
-
         let authorization_token = localStorage.getItem("token");
 
+        fetch("/api/add/post", {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                primaryb64: primarybase64,
+                secondaryb64: secondarybase64,
+                caption: caption,
+                token: authorization_token
+            })
+        }).then(
+            (response) => {
+                console.log(response);
+                if (response.ok) {
+                    setLoading(false);
+                    setSuccess("Successfully posted!");
+                    setTimeout(() => { setSuccess(""); router.push("/feed")}, 3000);
+                } else { throw new Error("Error: " + response.statusText); }
+            }
+        ).catch((error) => {
+                console.log(error);
+                setLoading(false);
+                setFailure(error.message)
+                setTimeout(() => { setFailure("") }, 5000);
+            }
+        )
+
+        /* 
         const formData = new FormData();
-        /* formData.append('primary', selectedFileOne);
-        formData.append('secondary', selectedFileTwo); */
         formData.append('primaryb64', primarybase64);
         formData.append('secondaryb64', secondarybase64);
         formData.append('caption', caption ? caption : "");
         formData.append('token', authorization_token!);
-        /* console.log(formData); */
+        console.log(formData);
 
         let options = {
             url: "/api/add/post",
             method: "POST",
             headers: { 'Content-Type': "multipart/form-data" },
-            data: formData,
+            data: {
+                primaryb64: primarybase64,
+                secondaryb64: secondarybase64,
+                caption: caption,
+                token: authorization_token
+            }
         }
 
         axios.request(options).then(
@@ -100,7 +126,7 @@ export default function Post() {
                 setFailure(error.response.data.error)
                 setTimeout(() => { setFailure("") }, 5000);
             }
-        )
+        ) */
     }
 
     return (
@@ -129,14 +155,14 @@ export default function Post() {
                 </div>
             </div>
             <input className={s.caption} placeholder='captions not working, set them after you post in your app!' onChange={(txt) => setCaption(txt.target.value)}
-                disabled 
+                disabled
             ></input>
             <div className={s.submit} onClick={() => { handleSubmission() }}>
                 submit
             </div>
             <div className={s.info}>
                 *some photos taken on an iphone (.heic) may not work. if there is an error try taking a screenshot of the image and uploading that instead.<br />
-                *you might get a client-side exception if the image is too large. The maximum limit currently is 4.5mb for both images combined.
+                *you might get a client-side exception if the image is too large. The maximum limit currently is 12mb for both images combined.
             </div>
             {/* fix this nesting */}
             {