Support downloading directories as a zip archive (#106)

* Add directory download as zip feature

Implements the ability for users to download directories as zip files if enabled in config. Adds a new API route for directory zipping, updates UI components to show a download button for directories, and introduces related config and type changes. Also includes a new download icon.

* Windows path bugfix

* Include empty directories in zip archive

* Address feedback

- `isDirectoryDownloadsAllowed` -> `areDirectoryDownloadsAllowed`
- send `parentPath` & `name` to API instead of resolving `fullPath` on client
- call `ensureUserPathIsValidAndSecurelyAccessible` before zipping
- set config `allowDirectoryDownloads` default to `false`
- add `zip` to Dockerfile and replace in-house zip algorithm
- replace `download.svg` with heroicon's `arrow-down-tray`
- `replace` with glob -> `replaceAll` with string

* Cleanup apt-get command

* Remove unused zip archive and directory functions

Dockerfile

@@ -2,7 +2,7 @@ FROM denoland/deno:ubuntu-2.5.2
 
 EXPOSE 8000
 
-RUN apt-get update && apt-get install -y make
+RUN apt-get update && apt-get install -y make zip
 
 WORKDIR /app
 

bewcloud.config.sample.ts

@@ -18,6 +18,7 @@ const config: PartialDeep<Config> = {
   // files: {
   //   rootPath: 'data-files',
   //   allowPublicSharing: false, // If true, public file sharing will be allowed (still requires a user to enable sharing for a given file or directory)
+  //   allowDirectoryDownloads: false, // If true, directories can be downloaded as zip files
   // },
   // core: {
   //   enabledApps: ['news', 'notes', 'photos', 'expenses', 'contacts', 'calendar'], // dashboard and files cannot be disabled

components/files/ListFiles.tsx

@@ -18,6 +18,7 @@ interface ListFilesProps {
   onClickDeleteFile?: (parentPath: string, name: string) => Promise<void>;
   onClickCreateShare?: (filePath: string) => void;
   onClickOpenManageShare?: (fileShareId: string) => void;
+  onClickDownloadDirectory?: (parentPath: string, name: string) => void;
   isShowingNotes?: boolean;
   isShowingPhotos?: boolean;
   fileShareId?: string;
@@ -39,6 +40,7 @@ export default function ListFiles(
     onClickDeleteFile,
     onClickCreateShare,
     onClickOpenManageShare,
+    onClickDownloadDirectory,
     isShowingNotes,
     isShowingPhotos,
     fileShareId,
@@ -165,10 +167,26 @@ export default function ListFiles(
                         typeof onClickOpenMoveDirectory === 'undefined')
                       ? null
                       : (
-                        <section class='flex items-center justify-end w-24'>
+                        <section class='flex items-center justify-end w-32'>
+                          {typeof onClickDownloadDirectory === 'undefined' ? null : (
+                            <span
+                              class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
+                              onClick={() => onClickDownloadDirectory(directory.parent_path, directory.directory_name)}
+                            >
+                              <img
+                                src='/images/download.svg'
+                                class='white drop-shadow-md'
+                                width={18}
+                                height={18}
+                                alt='Download directory as zip'
+                                title='Download directory as zip'
+                              />
+                            </span>
+                          )}
                           <span
                             class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
-                            onClick={() => onClickOpenRenameDirectory(directory.parent_path, directory.directory_name)}
+                            onClick={() =>
+                              onClickOpenRenameDirectory(directory.parent_path, directory.directory_name)}
                           >
                             <img
                               src='/images/rename.svg'
@@ -181,8 +199,7 @@ export default function ListFiles(
                           </span>
                           <span
                             class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
-                            onClick={() =>
+                            onClick={() => onClickOpenMoveDirectory(directory.parent_path, directory.directory_name)}
-                              onClickOpenMoveDirectory(directory.parent_path, directory.directory_name)}
                           >
                             <img
                               src='/images/move.svg'

components/files/MainFiles.tsx

@@ -48,6 +48,7 @@ interface MainFilesProps {
   initialPath: string;
   baseUrl: string;
   isFileSharingAllowed: boolean;
+  areDirectoryDownloadsAllowed: boolean;
   fileShareId?: string;
 }
 
@@ -58,6 +59,7 @@ export default function MainFiles(
     initialPath,
     baseUrl,
     isFileSharingAllowed,
+    areDirectoryDownloadsAllowed,
     fileShareId,
   }: MainFilesProps,
 ) {
@@ -411,6 +413,21 @@ export default function MainFiles(
     moveDirectoryOrFileModal.value = null;
   }
 
+  function onClickDownloadDirectory(parentPath: string, name: string) {
+    // Create download URL with proper path encoding
+    const downloadUrl = `/api/files/download-directory?parentPath=${encodeURIComponent(parentPath)}&name=${
+      encodeURIComponent(name)
+    }`;
+
+    // Create a temporary anchor element to trigger download
+    const link = document.createElement('a');
+    link.href = downloadUrl;
+    link.download = `${name}.zip`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
   async function onClickDeleteDirectory(parentPath: string, name: string, isBulkDeleting = false) {
     if (isBulkDeleting || confirm('Are you sure you want to delete this directory?')) {
       if (!isBulkDeleting && isDeleting.value) {
@@ -839,6 +856,7 @@ export default function MainFiles(
           onClickDeleteFile={onClickDeleteFile}
           onClickCreateShare={isFileSharingAllowed ? onClickCreateShare : undefined}
           onClickOpenManageShare={isFileSharingAllowed ? onClickOpenManageShare : undefined}
+          onClickDownloadDirectory={areDirectoryDownloadsAllowed ? onClickDownloadDirectory : undefined}
           fileShareId={fileShareId}
         />
 

fresh.gen.ts

@@ -46,6 +46,7 @@ import * as $api_files_create_share from './routes/api/files/create-share.tsx';
 import * as $api_files_delete_directory from './routes/api/files/delete-directory.tsx';
 import * as $api_files_delete_share from './routes/api/files/delete-share.tsx';
 import * as $api_files_delete from './routes/api/files/delete.tsx';
+import * as $api_files_download_directory from './routes/api/files/download-directory.tsx';
 import * as $api_files_get_directories from './routes/api/files/get-directories.tsx';
 import * as $api_files_get_share from './routes/api/files/get-share.tsx';
 import * as $api_files_get from './routes/api/files/get.tsx';
@@ -155,6 +156,7 @@ const manifest = {
     './routes/api/files/delete-directory.tsx': $api_files_delete_directory,
     './routes/api/files/delete-share.tsx': $api_files_delete_share,
     './routes/api/files/delete.tsx': $api_files_delete,
+    './routes/api/files/download-directory.tsx': $api_files_download_directory,
     './routes/api/files/get-directories.tsx': $api_files_get_directories,
     './routes/api/files/get-share.tsx': $api_files_get_share,
     './routes/api/files/get.tsx': $api_files_get,

islands/files/FilesWrapper.tsx

@@ -7,6 +7,7 @@ interface FilesWrapperProps {
   initialPath: string;
   baseUrl: string;
   isFileSharingAllowed: boolean;
+  areDirectoryDownloadsAllowed: boolean;
   fileShareId?: string;
 }
 
@@ -18,6 +19,7 @@ export default function FilesWrapper(
     initialPath,
     baseUrl,
     isFileSharingAllowed,
+    areDirectoryDownloadsAllowed,
     fileShareId,
   }: FilesWrapperProps,
 ) {
@@ -28,6 +30,7 @@ export default function FilesWrapper(
       initialPath={initialPath}
       baseUrl={baseUrl}
       isFileSharingAllowed={isFileSharingAllowed}
+      areDirectoryDownloadsAllowed={areDirectoryDownloadsAllowed}
       fileShareId={fileShareId}
     />
   );

lib/config.ts

@@ -22,6 +22,7 @@ export class AppConfig {
       files: {
         rootPath: 'data-files',
         allowPublicSharing: false,
+        allowDirectoryDownloads: true,
       },
       core: {
         enabledApps: ['news', 'notes', 'photos', 'expenses', 'contacts', 'calendar'],
@@ -179,6 +180,12 @@ export class AppConfig {
     return this.config.files.allowPublicSharing;
   }
 
+  static async areDirectoryDownloadsAllowed(): Promise<boolean> {
+    await this.loadConfig();
+
+    return this.config.files.allowDirectoryDownloads;
+  }
+
   static async getFilesRootPath(): Promise<string> {
     await this.loadConfig();
 

lib/models/files.ts

@@ -598,7 +598,11 @@ export async function ensureUserPathIsValidAndSecurelyAccessible(userId: string,
 
   const resolvedFullPath = `${resolve(fullPath)}/`;
 
-  if (!resolvedFullPath.startsWith(userRootPath)) {
+  // Normalize path separators for consistent comparison on Windows
+  const normalizedUserRootPath = userRootPath.replaceAll('\\', '/');
+  const normalizedResolvedFullPath = resolvedFullPath.replaceAll('\\', '/');
+
+  if (!normalizedResolvedFullPath.startsWith(normalizedUserRootPath)) {
     throw new Error('Invalid file path');
   }
 }

lib/types.ts

@@ -184,6 +184,8 @@ export interface Config {
     rootPath: string;
     /** If true, public file sharing will be allowed (still requires a user to enable sharing for a given file or directory) */
     allowPublicSharing: boolean;
+    /** If true, directories can be downloaded as zip files */
+    allowDirectoryDownloads: boolean;
   };
   core: {
     /** dashboard and files cannot be disabled */

routes/api/files/download-directory.tsx

@@ -0,0 +1,74 @@
+import { Handlers } from 'fresh/server.ts';
+import { join } from '@std/path';
+
+import { FreshContextState } from '/lib/types.ts';
+import { AppConfig } from '/lib/config.ts';
+import { ensureUserPathIsValidAndSecurelyAccessible } from '/lib/models/files.ts';
+
+interface Data {}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async GET(request, context) {
+    if (!context.state.user) {
+      return new Response('Redirect', { status: 303, headers: { 'Location': `/login` } });
+    }
+
+    const config = await AppConfig.getConfig();
+
+    // Check if directory downloads are enabled
+    if (!config.files?.allowDirectoryDownloads) {
+      return new Response('Directory downloads are not enabled', { status: 403 });
+    }
+
+    const searchParams = new URL(request.url).searchParams;
+    const parentPath = searchParams.get('parentPath') || '/';
+    const name = searchParams.get('name');
+
+    if (!name) {
+      return new Response('Directory name is required', { status: 400 });
+    }
+
+    // Construct the full directory path
+    const directoryPath = `${join(parentPath, name)}/`;
+
+    try {
+      await ensureUserPathIsValidAndSecurelyAccessible(context.state.user.id, directoryPath);
+
+      // Get the actual filesystem path
+      const filesRootPath = config.files?.rootPath || 'data-files';
+      const userRootPath = join(filesRootPath, context.state.user.id);
+      const fullDirectoryPath = join(userRootPath, directoryPath);
+
+      // Use the zip command to create the archive
+      const zipProcess = new Deno.Command('zip', {
+        args: ['-r', '-', '.'],
+        cwd: fullDirectoryPath,
+        stdout: 'piped',
+        stderr: 'piped',
+      });
+
+      const { code, stdout, stderr } = await zipProcess.output();
+
+      if (code !== 0) {
+        const errorText = new TextDecoder().decode(stderr);
+        console.error('Zip command failed:', errorText);
+        return new Response('Error creating zip archive', { status: 500 });
+      }
+
+      return new Response(stdout, {
+        status: 200,
+        headers: {
+          'content-type': 'application/zip',
+          'content-disposition': `attachment; filename="${name}.zip"`,
+          'cache-control': 'no-cache, no-store, must-revalidate',
+        },
+      });
+    } catch (error) {
+      console.error('Error creating directory zip:', error);
+      if (error.message === 'Invalid file path') {
+        return new Response('Invalid directory path', { status: 400 });
+      }
+      return new Response('Error creating zip archive', { status: 500 });
+    }
+  },
+};

routes/file-share/[fileShareId].tsx

@@ -126,6 +126,7 @@ export default function FilesPage({ data }: PageProps<Data, FreshContextState>)
         initialPath={data.currentPath}
         baseUrl={data.baseUrl}
         isFileSharingAllowed
+        areDirectoryDownloadsAllowed={false}
         fileShareId={data.fileShareId}
       />
     </main>

routes/files.tsx

@@ -11,6 +11,7 @@ interface Data {
   currentPath: string;
   baseUrl: string;
   isFileSharingAllowed: boolean;
+  areDirectoryDownloadsAllowed: boolean;
 }
 
 export const handler: Handlers<Data, FreshContextState> = {
@@ -40,6 +41,7 @@ export const handler: Handlers<Data, FreshContextState> = {
     const userFiles = await FileModel.list(context.state.user.id, currentPath);
 
     const isPublicFileSharingAllowed = await AppConfig.isPublicFileSharingAllowed();
+    const areDirectoryDownloadsAllowed = await AppConfig.areDirectoryDownloadsAllowed();
 
     return await context.render({
       userDirectories,
@@ -47,6 +49,7 @@ export const handler: Handlers<Data, FreshContextState> = {
       currentPath,
       baseUrl,
       isFileSharingAllowed: isPublicFileSharingAllowed,
+      areDirectoryDownloadsAllowed,
     });
   },
 };
@@ -60,6 +63,7 @@ export default function FilesPage({ data }: PageProps<Data, FreshContextState>)
         initialPath={data.currentPath}
         baseUrl={data.baseUrl}
         isFileSharingAllowed={data.isFileSharingAllowed}
+        areDirectoryDownloadsAllowed={data.areDirectoryDownloadsAllowed}
       />
     </main>
   );

static/images/download.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class="size-6"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+  />
+</svg>