Make API route accept all music files

src/app/api/tracks/route.ts

@@ -1,14 +1,9 @@
+import { checkIfMusicFile } from '@/lib/music';
 import fs from 'fs';
 import { NextResponse } from 'next/server';
 
 const MUSIC_DIR = '/app/music';
 export async function GET() {
-  const files = fs
+  const files = fs.readdirSync(MUSIC_DIR).filter((f) => checkIfMusicFile(f));
-    .readdirSync(MUSIC_DIR)
-    .filter((f) =>
-      ['.mp3', '.m4a', 'audio/mpeg', 'audio/mp4', 'audio/x-m4a'].some((suffix) =>
-        f.endsWith(suffix),
-      ),
-    );
   return NextResponse.json(files);
 }

src/app/api/upload/route.ts

@@ -1,14 +1,18 @@
 import fs from 'fs';
 import path from 'path';
 import { NextRequest, NextResponse } from 'next/server';
+import { checkIfMusicFile } from '@/lib/music';
 
 const MUSIC_DIR = '/app/music';
 
 export async function POST(req: NextRequest) {
   const formData = await req.formData();
   const file = formData.get('file') as File;
-  if (!file || !file.name.endsWith('.mp3')) {
+  if (checkIfMusicFile(file.name)) {
-    return NextResponse.json({ error: 'Only .mp3 files are allowed.' }, { status: 400 });
+    return NextResponse.json(
+      { error: 'Only music files are allowed to be uploaded' },
+      { status: 400 },
+    );
   }
   const arrayBuffer = await file.arrayBuffer();
   const buffer = Buffer.from(arrayBuffer);

src/app/music/page.tsx

@@ -34,6 +34,8 @@ export default function Home() {
     setUploading(false);
     if (res.ok) {
       fetchTracks();
+    } else {
+      console.error(res.status, res.text())
     }
   };
 
@@ -43,9 +45,9 @@ export default function Home() {
         Music Player
       </Typography>
       <Box textAlign="center" mb={3}>
-        <label htmlFor="upload-mp3">
+        <label htmlFor="upload">
           <Input
-            id="upload-mp3"
+            id="upload"
             type="file"
             sx={{ display: 'none' }}
             inputProps={{ accept: '.mp3, .m4a, audio/mpeg, audio/mp4, audio/x-m4a' }}

src/lib/music.ts

@@ -0,0 +1,4 @@
+export const checkIfMusicFile = (name: string) =>
+  ['.mp3', '.m4a', 'audio/mpeg', 'audio/mp4', 'audio/x-m4a'].some((suffix) =>
+    name.endsWith(suffix),
+  );