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
2025-10-08 15:32:45 +02:00
parent c81ef77370
commit c4a5166e3b
13 changed files with 153 additions and 6 deletions
--- a/2
+++ b/2
@@ -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

--- a/bewcloud.config.sample.ts
+++ b/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
--- a/components/files/ListFiles.tsx
+++ b/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={() =>
-                              onClickOpenMoveDirectory(directory.parent_path, directory.directory_name)}
+                            onClick={() => onClickOpenMoveDirectory(directory.parent_path, directory.directory_name)}
                          >
                            <img
                              src='/images/move.svg'
--- a/components/files/MainFiles.tsx
+++ b/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}
        />

--- a/fresh.gen.ts
+++ b/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,
--- a/islands/files/FilesWrapper.tsx
+++ b/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}
    />
  );
--- a/lib/config.ts
+++ b/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();

--- a/lib/models/files.ts
+++ b/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');
  }
 }
--- a/lib/types.ts
+++ b/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 */
--- a/routes/api/files/download-directory.tsx
+++ b/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 });
+    }
+  },
+};
--- a/routes/file-share/[fileShareId].tsx
+++ b/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>
--- a/routes/files.tsx
+++ b/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>
  );
--- a/static/images/download.svg
+++ b/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>