build: 🏗️ Add minio in local config

apps/builder/.env.local.example

@@ -15,10 +15,13 @@ NEXT_PUBLIC_EMAIL_NOTIFICATIONS_FROM_EMAIL=
 
 # Storage
 # Used for uploading images, videos, etc...
-S3_ACCESS_KEY=
-S3_SECRET_KEY=
-S3_REGION=
-S3_BUCKET=
+S3_ACCESS_KEY=minio
+S3_SECRET_KEY=minio123
+S3_BUCKET=typebot
+S3_PORT=9000
+S3_ENDPOINT=localhost
+S3_SSL=false
+# S3_REGION=
 
 # Auth
 # (Optional) Used to login using GitHub

apps/builder/components/account/PersonalInfoForm.tsx

@@ -61,7 +61,7 @@ export const PersonalInfoForm = () => {
           <Stack>
             <UploadButton
               size="sm"
-              filePath={`users/${user?.id}/avatar`}
+              filePath={`public/users/${user?.id}/avatar`}
               leftIcon={<UploadIcon />}
               onFileUploaded={handleFileUploaded}
             >

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -82,7 +82,7 @@ const UploadFileContent = ({ onNewUrl }: ContentProps) => {
   return (
     <Flex justify="center" py="2">
       <UploadButton
-        filePath={`typebots/${typebot?.id}`}
+        filePath={`public/typebots/${typebot?.id}`}
         onFileUploaded={onNewUrl}
         includeFileName
         colorScheme="blue"

apps/builder/package.json

@@ -37,7 +37,6 @@
     "@udecode/plate-link": "^10.0.0",
     "@udecode/plate-ui-link": "^10.0.0",
     "@udecode/plate-ui-toolbar": "^10.0.0",
-    "aws-sdk": "^2.1073.0",
     "bot-engine": "*",
     "browser-image-compression": "^1.0.17",
     "cuid": "^2.1.8",
@@ -55,6 +54,7 @@
     "kbar": "^0.1.0-beta.27",
     "micro": "^9.3.4",
     "micro-cors": "^0.1.1",
+    "minio": "^7.0.26",
     "models": "*",
     "msw": "^0.36.8",
     "next": "^12.0.10",
@@ -85,6 +85,7 @@
     "@playwright/test": "^1.19.0",
     "@types/google-spreadsheet": "^3.1.5",
     "@types/micro-cors": "^0.1.2",
+    "@types/minio": "^7.0.12",
     "@types/node": "^17.0.17",
     "@types/nprogress": "^0.2.0",
     "@types/papaparse": "^5.3.2",

apps/builder/pages/api/storage/upload-url.ts

@@ -1,10 +1,9 @@
 import { withSentry } from '@sentry/nextjs'
-import aws from 'aws-sdk'
+import { Client } from 'minio'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getSession } from 'next-auth/react'
-import { methodNotAllowed } from 'utils'
+import { badRequest, methodNotAllowed } from 'utils'
 
-const maxUploadFileSize = 10485760 // 10 MB
 const handler = async (
   req: NextApiRequest,
   res: NextApiResponse
@@ -16,26 +15,36 @@ const handler = async (
       res.status(401)
       return
     }
-    aws.config.update({
-      accessKeyId: process.env.S3_ACCESS_KEY,
-      secretAccessKey: process.env.S3_SECRET_KEY,
+
+    if (
+      !process.env.S3_ENDPOINT ||
+      !process.env.S3_ACCESS_KEY ||
+      !process.env.S3_SECRET_KEY ||
+      !process.env.S3_BUCKET
+    )
+      return res.send({
+        message:
+          'S3 not properly configured. Missing one of those variables: S3_ENDPOINT, S3_ACCESS_KEY, S3_ACCESS_KEY, S3_BUCKET',
+      })
+
+    const s3 = new Client({
+      endPoint: process.env.S3_ENDPOINT,
+      port: process.env.S3_PORT ? Number(process.env.S3_PORT) : undefined,
+      useSSL:
+        process.env.S3_SSL && process.env.S3_SSL === 'false' ? false : true,
+      accessKey: process.env.S3_ACCESS_KEY,
+      secretKey: process.env.S3_SECRET_KEY,
       region: process.env.S3_REGION,
-      signatureVersion: 'v4',
     })
 
-    const s3 = new aws.S3()
-    const post = s3.createPresignedPost({
-      Bucket: process.env.S3_BUCKET,
-      Fields: {
-        ACL: 'public-read',
-        key: req.query.key,
-        'Content-Type': req.query.fileType,
-      },
-      Expires: 120, // seconds
-      Conditions: [['content-length-range', 0, maxUploadFileSize]],
-    })
+    const filePath = req.query.filePath as string | undefined
+    if (!filePath) return badRequest(res)
+    const presignedUrl = await s3.presignedPutObject(
+      process.env.S3_BUCKET as string,
+      filePath
+    )
 
-    return res.status(200).json(post)
+    return res.status(200).send({ presignedUrl })
   }
   return methodNotAllowed(res)
 }

apps/builder/services/utils/utils.ts

@@ -1,6 +1,7 @@
 import imageCompression from 'browser-image-compression'
 import { Parser } from 'htmlparser2'
 import { Step, Typebot } from 'models'
+import { sendRequest } from 'utils'
 
 export const fetcher = async (input: RequestInfo, init?: RequestInit) => {
   const res = await fetch(input, init)
@@ -36,26 +37,23 @@ export const toKebabCase = (value: string) => {
   return matched.map((x) => x.toLowerCase()).join('-')
 }
 
-export const uploadFile = async (file: File, key: string) => {
-  const res = await fetch(
-    `/api/storage/upload-url?key=${encodeURIComponent(
-      key
-    )}&fileType=${encodeURIComponent(file.type)}`
+export const uploadFile = async (file: File, filePath: string) => {
+  const { data } = await sendRequest<{ presignedUrl: string }>(
+    `/api/storage/upload-url?filePath=${encodeURIComponent(filePath)}`
   )
-  const { url, fields } = await res.json()
-  const formData = new FormData()
 
-  Object.entries({ ...fields, file }).forEach(([key, value]) => {
-    formData.append(key, value as string | Blob)
-  })
+  if (!data?.presignedUrl)
+    return {
+      url: null,
+    }
 
-  const upload = await fetch(url, {
-    method: 'POST',
-    body: formData,
+  await fetch(data.presignedUrl, {
+    method: 'PUT',
+    body: file,
   })
 
   return {
-    url: upload.ok ? `${url}/${key}` : null,
+    url: data.presignedUrl.split('?')[0],
   }
 }
 

docker-compose.yml

@@ -11,5 +11,17 @@ services:
       POSTGRES_DB: 'typebot'
       POSTGRES_PASSWORD: ''
       POSTGRES_HOST_AUTH_METHOD: trust
+  minio:
+    image: quay.io/minio/minio
+    command: server /data --console-address ":9001"
+    ports:
+      - '9000:9000'
+      - '9001:9001'
+    environment:
+      MINIO_ROOT_USER: minio
+      MINIO_ROOT_PASSWORD: minio123
+    volumes:
+      - s3_data:/data
 volumes:
   db_data:
+  s3_data: