feat: nested folders + each user see only his files (#10)

Author: patrick11514

eslint.config.js

@@ -1,10 +1,10 @@
-import prettier from 'eslint-config-prettier';
-import { fileURLToPath } from 'node:url';
 import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
 import svelte from 'eslint-plugin-svelte';
 import { defineConfig } from 'eslint/config';
 import globals from 'globals';
+import { fileURLToPath } from 'node:url';
 import ts from 'typescript-eslint';
 import svelteConfig from './svelte.config.js';
 
@@ -31,7 +31,6 @@ export default defineConfig(
 
         languageOptions: {
             parserOptions: {
-                projectService: true,
                 extraFileExtensions: ['.svelte'],
                 parser: ts.parser,
                 svelteConfig

migrations/20260317000000_file_paths.ts

@@ -0,0 +1,14 @@
+/*eslint-disable @typescript-eslint/no-explicit-any*/
+
+import { Kysely } from 'kysely';
+
+export const up = async (conn: Kysely<any>) => {
+    await conn.schema
+        .alterTable('files')
+        .addColumn('path', 'varchar(255)', (cb) => cb.defaultTo(''))
+        .execute();
+};
+
+export const down = async (conn: Kysely<any>) => {
+    await conn.schema.alterTable('files').dropColumn('path').execute();
+};

src/lib/server/functions.ts

@@ -63,6 +63,8 @@ export const uploadFile = async (fd: FormData, user_id: number) => {
     const buffer = Buffer.from(await file.arrayBuffer());
     const filePath = path.join(uploadDir, filename);
 
+    const relativePath = fd.get('path') as string | null;
+
     await writeFile(filePath, buffer);
 
     await conn
@@ -72,7 +74,8 @@ export const uploadFile = async (fd: FormData, user_id: number) => {
             original_name: originalName,
             mime_type: file.type,
             size: file.size,
-            uploaded_by: user_id
+            uploaded_by: user_id,
+            path: relativePath || ''
         })
         .execute();
 

src/lib/server/routes/albums.ts

@@ -1,7 +1,7 @@
+import type { SuccessApiResponse } from '$/types/types';
 import { type ErrorApiResponse } from '@patrick115/sveltekitapi';
 import { v4 as uuid } from 'uuid';
 import { z } from 'zod';
-import type { SuccessApiResponse } from '$/types/types';
 import { authProcedure, procedure } from '../api';
 import { conn } from '../variables';
 
@@ -17,6 +17,7 @@ export const albumsRouter = {
             .selectFrom('files')
             .select(['id', 'mime_type'])
             .where('id', 'in', input.fileIds)
+            .where('uploaded_by', '=', ctx.id)
             .execute();
 
         if (files.length !== input.fileIds.length) {

src/lib/server/routes/files.ts

@@ -30,8 +30,8 @@ export const filesRouter = {
             orderDir: z.enum(['asc', 'desc']).default('desc'),
             type: z.string().optional()
         })
-    ).query(async ({ input }) => {
-        let query = conn.selectFrom('files').selectAll();
+    ).query(async ({ input, ctx }) => {
+        let query = conn.selectFrom('files').selectAll().where('uploaded_by', '=', ctx.id);
 
         if (input.type) {
             query = query.where('mime_type', 'like', `${input.type}%`);
@@ -47,11 +47,12 @@ export const filesRouter = {
             data
         } satisfies SuccessApiResponse<typeof data>;
     }),
-    get: authProcedure.POST.input(z.object({ id: z.string() })).query(async ({ input }) => {
+    get: authProcedure.POST.input(z.object({ id: z.string() })).query(async ({ input, ctx }) => {
         const file = await conn
             .selectFrom('files')
             .selectAll()
             .where('id', '=', input.id)
+            .where('uploaded_by', '=', ctx.id)
             .executeTakeFirst();
         if (!file) {
             return {
@@ -65,11 +66,12 @@ export const filesRouter = {
             data: file
         } satisfies SuccessApiResponse<typeof file>;
     }),
-    delete: authProcedure.POST.input(z.object({ id: z.string() })).query(async ({ input }) => {
+    delete: authProcedure.POST.input(z.object({ id: z.string() })).query(async ({ input, ctx }) => {
         const file = await conn
             .selectFrom('files')
             .selectAll()
             .where('id', '=', input.id)
+            .where('uploaded_by', '=', ctx.id)
             .executeTakeFirst();
         if (!file) {
             return {

src/lib/server/routes/folders.ts

@@ -122,6 +122,7 @@ export const foldersRouter = {
             .selectFrom('files')
             .select(['id'])
             .where('id', 'in', input.fileIds)
+            .where('uploaded_by', '=', ctx.id)
             .execute();
 
         if (files.length !== input.fileIds.length) {

src/routes/+page.svelte

@@ -95,6 +95,13 @@
 
             const formData = new FormData();
             formData.append('file', file);
+            if (file.webkitRelativePath) {
+                const pathParts = file.webkitRelativePath.split('/');
+                pathParts.pop(); // Remove the filename
+                formData.append('path', pathParts.join('/'));
+            } else {
+                formData.append('path', '');
+            }
 
             try {
                 const res = await API.files.upload(formData);
@@ -148,11 +155,33 @@
                     multiple
                     onchange={handleFileSelect}
                 />
+                <input
+                    type="file"
+                    id="folderInput"
+                    class="hidden"
+                    webkitdirectory
+                    multiple
+                    onchange={handleFileSelect}
+                />
                 <div class="flex flex-col items-center space-y-2">
                     <UploadCloud class="h-12 w-12 text-muted-foreground" />
                     <div class="text-sm text-muted-foreground">
-                        <span class="font-medium text-primary hover:text-primary/80"
-                            >Upload a file</span
+                        <button
+                            type="button"
+                            class="font-medium text-primary hover:text-primary/80"
+                            onclick={(e) => {
+                                e.stopPropagation();
+                                document.getElementById('fileInput')?.click();
+                            }}>Upload files</button
+                        >
+                        or
+                        <button
+                            type="button"
+                            class="font-medium text-primary hover:text-primary/80"
+                            onclick={(e) => {
+                                e.stopPropagation();
+                                document.getElementById('folderInput')?.click();
+                            }}>Upload a folder</button
                         >
                         or drag and drop
                     </div>

src/routes/api/folder/[id]/+server.ts

@@ -61,7 +61,7 @@ export const GET: RequestHandler = async ({ params, request }) => {
     const files = await conn
         .selectFrom('folder_files')
         .innerJoin('files', 'files.id', 'folder_files.file_id')
-        .select(['files.id', 'files.original_name', 'files.size'])
+        .select(['files.id', 'files.original_name', 'files.size', 'files.path'])
         .where('folder_files.folder_id', '=', id)
         .execute();
 
@@ -78,7 +78,10 @@ export const GET: RequestHandler = async ({ params, request }) => {
                 const fileStat = await stat(filePath).catch(() => null);
 
                 if (fileStat) {
-                    const entry = pack.entry({ name: file.original_name, size: fileStat.size });
+                    const tarName = file.path
+                        ? path.posix.join(file.path, file.original_name)
+                        : file.original_name;
+                    const entry = pack.entry({ name: tarName, size: fileStat.size });
                     const rs = createReadStream(filePath);
                     rs.pipe(entry);
                     await new Promise<void>((resolve, reject) => {
@@ -139,6 +142,8 @@ export const POST: RequestHandler = async ({ params, request }) => {
         }
 
         const originalName = path.basename(header.name);
+        const relativePath = path.dirname(header.name);
+        const dbPath = relativePath === '.' ? '' : relativePath;
 
         // Check if file with same name exists in folder
         const existingFile = await conn
@@ -221,7 +226,8 @@ export const POST: RequestHandler = async ({ params, request }) => {
                     original_name: originalName,
                     mime_type: mimeType,
                     size: buffer.length,
-                    uploaded_by: user.id
+                    uploaded_by: user.id,
+                    path: dbPath
                 })
                 .execute();
 

src/types/database.ts

@@ -34,6 +34,7 @@ export interface Files {
     id: string;
     mime_type: string;
     original_name: string;
+    path: Generated<string | null>;
     size: number;
     upload_date: Generated<Date>;
     uploaded_by: Generated<number | null>;