quick poc of uploading to minio test server with presigned urls and S3 sdk

.gitignore

@@ -52,3 +52,6 @@ e2e-tests/.yarn/*
 !e2e-tests/.yarn/releases
 e2e-tests/yarn-debug.log*
 e2e-tests/yarn-error.log*
+
+
+minio*

apps/web/package.json

@@ -31,6 +31,8 @@
     "@serlo/katex-styles": "1.0.1"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.670.0",
+    "@aws-sdk/s3-request-presigner": "^3.670.0",
     "@cortex-js/compute-engine": "^0.22.0",
     "@fortawesome/fontawesome-svg-core": "6.5.2",
     "@fortawesome/free-brands-svg-icons": "6.5.2",
@@ -68,6 +70,7 @@
     "katex": "^0.16.10",
     "mathjs": "^12.4.1",
     "mathlive": "^0.98.6",
+    "minio": "^8.0.1",
     "next": "^14.2.2",
     "next-query-params": "^4.3.0",
     "nprogress": "^0.2.0",

apps/web/src/pages/___upload.tsx

@@ -0,0 +1,87 @@
+import { useRef, useState } from 'react'
+
+import { renderedPageNoHooks } from '@/helper/rendered-page'
+
+export interface LegalData {
+  contentHtml: string
+  isGerman: boolean
+}
+
+export default renderedPageNoHooks(() => {
+  return <Content />
+})
+
+export function Content() {
+  const [status, setStatus] = useState<'no-uploads' | '' | 'uploaded'>(
+    'no-uploads'
+  )
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  function upload() {
+    const files = inputRef.current?.files
+    if (!files) return
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+      retrieveNewURL(file, (file: File, url: string) => {
+        uploadFile(file, url)
+      })
+    }
+  }
+
+  // `retrieveNewURL` accepts the name of the current file and invokes the `/presignedUrl` endpoint to
+  // generate a pre-signed URL for use in uploading that file:
+  function retrieveNewURL(file: File, cb: (file: File, url: string) => void) {
+    fetch(`/api/presigned?name=${file.name}`)
+      .then((response) => {
+        void response.text().then((url) => {
+          cb(file, url)
+        })
+      })
+      .catch((e) => {
+        // eslint-disable-next-line no-console
+        console.error(e)
+      })
+  }
+
+  // `uploadFile` accepts the current filename and the pre-signed URL. It then uses `Fetch API`
+  // to upload this file to S3 at `play.min.io:9000` using the URL:
+  function uploadFile(file: File, url: string) {
+    if (status === 'no-uploads') setStatus('')
+    fetch(JSON.parse(url) as string, {
+      method: 'PUT',
+      body: file,
+      headers: {
+        'Content-Type': file.type,
+        'Access-Control-Allow-Origin': '*',
+      },
+    })
+      .then(() => {
+        console.log(file.name)
+        setStatus('uploaded')
+        // eslint-disable-next-line no-console
+        // document.querySelector('#status').innerHTML +=
+        //   `<br>Uploaded ${file.name}.`
+      })
+      .catch((e) => {
+        console.log('catched')
+        // eslint-disable-next-line no-console
+        console.error(e)
+      })
+  }
+
+  return (
+    <>
+      <input type="file" ref={inputRef} multiple />
+      <button onClick={upload}>Upload</button>
+
+      <div>
+        {status === 'no-uploads'
+          ? 'No uploads'
+          : status === 'uploaded'
+            ? 'Uploaded!'
+            : ''}
+      </div>
+    </>
+  )
+}

apps/web/src/pages/api/presigned.ts

@@ -0,0 +1,60 @@
+import {
+  PutObjectCommand,
+  PutObjectCommandInput,
+  S3Client,
+} from '@aws-sdk/client-s3'
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+const s3Client = new S3Client({
+  region: 'us-east-1',
+  credentials: {
+    accessKeyId: 'Q3AM3UQ867SPQQA43P2F',
+    secretAccessKey: 'zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG',
+  },
+  endpoint: 'https://play.min.io:9000',
+  forcePathStyle: true,
+})
+
+async function generateUploadURL(fileName: string): Promise<string | null> {
+  const params: PutObjectCommandInput = {
+    Key: fileName,
+    Bucket: 'botho-test-bucket',
+    // ContentType: fileType,
+    // Metadata: { 'Content-Type': fileType },
+  }
+
+  const command = new PutObjectCommand(params)
+  return await getSignedUrl(s3Client, command, { expiresIn: 3600 })
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const name = String(req.query.name)
+  res.json(await generateUploadURL(name))
+}
+
+// simple access policy:
+// full public read access, everything else private
+
+// {
+//     "Version": "2012-10-17",
+//     "Statement": [
+//         {
+//             "Effect": "Allow",
+//             "Principal": {
+//                 "AWS": [
+//                     "*"
+//                 ]
+//             },
+//             "Action": [
+//                 "s3:GetObject"
+//             ],
+//             "Resource": [
+//                 "arn:aws:s3:::botho-test-bucket/*"
+//             ]
+//         }
+//     ]
+// }