Store files in supabase storage

nooobcoder · nooobcoder · commit 12c565fc5bb1 · 2022-06-16T06:33:31.000Z
diff --git a/supa-vacation-nextjs/.prettierrc b/supa-vacation-nextjs/.prettierrc
@@ -3,5 +3,6 @@
   "useTabs": false,
   "trailingComma": "all",
   "endOfLine": "lf",
-  "semi": true
+  "semi": true,
+  "printWidth": 80
 }
diff --git a/supa-vacation-nextjs/components/ListingForm.js b/supa-vacation-nextjs/components/ListingForm.js
@@ -6,6 +6,7 @@ import { toast } from 'react-hot-toast';
 import { Formik, Form } from 'formik';
 import Input from '@/components/Input';
 import ImageUpload from '@/components/ImageUpload';
+import axios from "axios"
 
 const ListingSchema = Yup.object().shape({
   title: Yup.string().trim().required(),
@@ -27,8 +28,22 @@ const ListingForm = ({
   const [disabled, setDisabled] = useState(false);
   const [imageUrl, setImageUrl] = useState(initialValues?.image ?? '');
 
-  const upload = async image => {
-    // TODO: Upload image to remote storage
+  const upload = async (image) => {
+    if (!image) return;
+
+    let toastId;
+    try {
+      setDisabled(true);
+      toastId = toast.loading('Uploading...');
+      const { data } = await axios.post('/api/image-upload', { image });
+      setImageUrl(data?.url);
+      toast.success('Successfully uploaded', { id: toastId });
+    } catch (e) {
+      toast.error('Unable to upload', { id: toastId });
+      setImageUrl('');
+    } finally {
+      setDisabled(false);
+    }
   };
 
   const handleOnSubmit = async (values = null) => {
diff --git a/supa-vacation-nextjs/package.json b/supa-vacation-nextjs/package.json
@@ -31,9 +31,12 @@
     "@prisma/client": "^3.15.1",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@types/node": "^17.0.42",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "10.4.5",
+    "axios": "^0.27.2",
+    "base64-arraybuffer": "^1.0.2",
     "eslint": "8.8.0",
     "eslint-config-next": "12.0.10",
+    "nanoid": "^4.0.0",
     "postcss": "^8.4.14",
     "prisma": "^3.15.1",
     "tailwindcss": "^3.1.3",
diff --git a/supa-vacation-nextjs/pages/api/image-upload.js b/supa-vacation-nextjs/pages/api/image-upload.js
@@ -1,7 +1,51 @@
-const handler = async (req, res) => { 
+import { createClient } from "@supabase/supabase-js"
+import { nanoid } from "nanoid";
+
+const supabase = createClient(
+  process.env.SUPABASE_URL,
+  process.env.SUPABASE_KEY
+);
+
+const handler = async (req, res) => {
   // Upload image to Supabase
   if (req.method === 'POST') {
-    // TODO
+    let { image } = req.body;
+
+    if (!image) {
+      return res.status(500).json({ message: 'No image provided' });
+    }
+
+    try {
+      const contentType = image.match(/data:(.*);base64/)?.[1];
+      const base64FileData = image.split('base64,')?.[1];
+
+      if (!contentType || !base64FileData) {
+        return res.status(500).json({ message: 'Image data not valid' });
+      }
+
+      const fileName = nanoid();
+      const ext = contentType.split('/')[1];
+      const path = `${fileName}.${ext}`;
+
+      const { data, error: uploadError } = await supabase.storage
+        .from(process.env.SUPABASE_BUCKET)
+        .upload(path, decode(base64FileData), {
+          contentType,
+          upsert: true,
+        });
+
+      if (uploadError) {
+        console.log(uploadError);
+        throw new Error('Unable to upload image to storage');
+      }
+
+      // Construct public URL
+      const url = `${process.env.SUPABASE_URL}/storage/v1/object/public/${data.Key}`;
+
+      return res.status(200).json({ url });
+    } catch (e) {
+      res.status(500).json({ message: 'Something went wrong' });
+    }
   }
   // HTTP method not supported!
   else {
diff --git a/supa-vacation-nextjs/pnpm-lock.yaml b/supa-vacation-nextjs/pnpm-lock.yaml
diff --git a/supa-vacation-nextjs/utils/supabaseOps.js b/supa-vacation-nextjs/utils/supabaseOps.js

Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,6 @@`
`3`	`3`	`"useTabs": false,`
`4`	`4`	`"trailingComma": "all",`
`5`	`5`	`"endOfLine": "lf",`
`6`		`- "semi": true`
	`6`	`+ "semi": true,`
	`7`	`+ "printWidth": 80`
`7`	`8`	`}`