Now only when the user submits the listening exam are the mp3 are uploaded onto firebase bucket

src/pages/api/exam/media/[...module].ts

@@ -0,0 +1,40 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import axios from "axios";
+import queryToURLSearchParams from "@/utils/query.to.url.params";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "POST") return post(req, res);
+
+  return res.status(404).json({ ok: false });
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) return res.status(401).json({ ok: false });
+
+
+  const queryParams = queryToURLSearchParams(req);
+  let endpoint = queryParams.getAll('module').join("/");
+
+  const response = await axios.post(
+    `${process.env.BACKEND_URL}/${endpoint}/media`,
+    req.body,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.BACKEND_JWT}`,
+        'Accept': 'audio/mpeg'
+      },
+      responseType: 'arraybuffer',
+    }
+  );
+
+  res.writeHead(200, {
+    'Content-Type': 'audio/mpeg',
+    'Content-Length': response.data.length
+  });
+
+  res.end(response.data);
+}

src/pages/api/storage/index.ts

@@ -0,0 +1,68 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
+import { IncomingForm, Files, Fields } from 'formidable';
+import { promises as fs } from 'fs';
+import { withIronSessionApiRoute } from 'iron-session/next';
+import { storage } from '@/firebase';
+import { sessionOptions } from '@/lib/session';
+import { v4 } from 'uuid';
+
+export const config = {
+    api: {
+        bodyParser: false,
+    },
+};
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+export async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (!req.session.user) {
+        res.status(401).json({ error: 'Not authorized' });
+        return;
+    }
+
+    if (req.method !== 'POST') {
+        return res.status(405).json({ error: 'Not allowed' });
+    }
+
+    const directory = (req.query.directory as string) || "uploads";
+
+    try {
+        const form = new IncomingForm({
+            keepExtensions: true,
+            multiples: true,
+        });
+
+        const [fields, files]: [Fields, Files] = await new Promise((resolve, reject) => {
+            form.parse(req, (err, fields, files) => {
+                if (err) reject(err);
+                resolve([fields, files]);
+            });
+        });
+
+        const fileArray = files.file;
+        if (!fileArray) {
+            return res.status(400).json({ error: 'No files provided' });
+        }
+
+        const filesToProcess = Array.isArray(fileArray) ? fileArray : [fileArray];
+
+        const uploadPromises = filesToProcess.map(async (file) => {
+            const split = file.originalFilename?.split('.') || ["bin"];
+            const extension = split[split.length - 1];
+
+            const buffer = await fs.readFile(file.filepath);
+            const storageRef = ref(storage, `${directory}/${v4()}.${extension}`);
+            await uploadBytes(storageRef, buffer);
+            const downloadURL = await getDownloadURL(storageRef);
+            await fs.unlink(file.filepath);
+            return downloadURL;
+        });
+
+        const urls = await Promise.all(uploadPromises);
+        res.status(200).json({ urls });
+    } catch (error) {
+        console.error('Upload error:', error);
+        res.status(500).json({ error: 'Upload failed' });
+    }
+}