@securancy/file-explorer 1.0.3 → 1.0.5

package/dist/components/FileExplorer.svelte

@@ -29,6 +29,9 @@ let createDirectoryModalOpen = false;
 let deleteFileModalOpen = false;
 let deleteFileEvent;
 let deleting = false;
+let overrideFilesModalOpen = false;
+let overrideFiles = [];
+let uploadFilesRequest;
 $: if (filePath) tick().then(() => scrollToRight());
 async function scrollToRight() {
   if (!fileExplorerContentContainer) return;
@@ -49,23 +52,21 @@ function handleScrollBack() {
 async function handleUploadFile(event) {
   if (uploadFiles) {
     if (event.detail.files) {
-      await uploadFiles({
+      await uploadFilesInternal({
         path: event.detail.path,
         files: event.detail.files
       });
-      documents.refresh();
     } else {
       const input = document.createElement("input");
       input.type = "file";
       input.multiple = true;
       input.click();
-      input.addEventListener("change", async (changeEvent) => {
-        if (input.files && uploadFiles) {
-          await uploadFiles({
+      input.addEventListener("change", async () => {
+        if (input.files) {
+          await uploadFilesInternal({
             path: event.detail.path,
             files: input.files
           });
-          documents.refresh();
         }
       });
     }
@@ -73,6 +74,30 @@ async function handleUploadFile(event) {
     dispatch("upload-file", event.detail);
   }
 }
+async function uploadFilesInternal(request) {
+  const filesInDirectory = Array.from(flattenedFiles($documents)).filter((x) => x.path === request.path);
+  const existingFiles = Array.from(request.files).filter((file) => filesInDirectory.some((document2) => document2.name === file.name));
+  if (existingFiles.length > 0) {
+    overrideFiles = existingFiles;
+    overrideFilesModalOpen = true;
+    uploadFilesRequest = request;
+  } else {
+    await uploadFiles(request);
+    documents.refresh();
+  }
+}
+async function confirmOverrideFiles() {
+  await uploadFiles(uploadFilesRequest);
+  documents.refresh();
+  overrideFilesModalOpen = false;
+  overrideFiles = [];
+  uploadFilesRequest = void 0;
+}
+async function cancelOverrideFiles() {
+  overrideFilesModalOpen = false;
+  overrideFiles = [];
+  uploadFilesRequest = void 0;
+}
 function handleCreateDirectory(event) {
   if (createDirectory) {
     createDirectoryPath = event.detail.path;
@@ -106,12 +131,21 @@ function deleteFileInternal() {
     });
   }
 }
+function* flattenedFiles(documents2) {
+  for (const document2 of documents2) {
+    if (document2.type === "file") {
+      yield document2;
+      continue;
+    }
+    yield* flattenedFiles(document2.children);
+  }
+}
 </script>
 
 <div class="file-explorer file-explorer--display-mode-{displayMode}">
   <div class="file-explorer__controls">
     <FileExplorerBreadcrumb {filePath} {routePrefix} />
-    <FileExplorerDisplayModeSwitcher bind:displayMode />
+    <FileExplorerDisplayModeSwitcher {translations} bind:displayMode />
   </div>
   {#if $$slots.search}
     <div class="file-explorer__search">
@@ -201,6 +235,32 @@ function deleteFileInternal() {
   </Modal>
 {/if}
 
+{#if overrideFilesModalOpen}
+  <Modal
+    title={translations.overrideFiles}
+    bind:opened={overrideFilesModalOpen}
+  >
+    <div>
+      {translations.overrideFilesConfirmation}
+    </div>
+    <div class="file-explorer__text file-explorer__text--semi-bold">
+      {overrideFiles.map((file) => file.name).join(', ')}
+    </div>
+    <svelte:fragment slot="footer">
+      <Button
+        color="soft"
+        fill="clear"
+        on:click={cancelOverrideFiles}
+      >
+        {translations.cancel}
+      </Button>
+      <Button color="danger" on:click={confirmOverrideFiles}>
+        {translations.override}
+      </Button>
+    </svelte:fragment>
+  </Modal>
+{/if}
+
 <style>/* eslint-disable */
 /**
  * Media queries and devices

package/dist/components/FileExplorer.svelte.d.ts

@@ -21,24 +21,34 @@ declare const __propDef: {
         routePrefix: string;
         canEdit: boolean | ((fileItem: FileSystemItem) => boolean);
         translations?: {
-            createDirectoryModalTitle: string;
             cancel: string;
             create: string;
-            creating: string;
-            itemTitle: (item: FileSystemItem) => string;
-            emptyDirectory: string;
-            previewFile: string;
+            createDirectory: string;
+            createDirectoryModalTitle: string;
+            createDirectoryPlaceholder: string;
+            createItemTitle: string;
             createdAt: string;
-            modifiedAt: string;
+            creating: string;
+            delete: string;
             deleteFile: string;
             deleteFileConfirmation: string;
             deleting: string;
-            delete: string;
-            createDirectory: string;
-            uploadFile: string;
-            size: string;
-            items: string;
             directoryAlreadyExists: string;
+            displayModeLabels: {
+                columns: string;
+                index: string;
+            };
+            displayModeSwitch: string;
+            emptyDirectory: string;
+            itemTitle: (item: FileSystemItem) => string;
+            items: string;
+            modifiedAt: string;
+            override: string;
+            overrideFiles: string;
+            overrideFilesConfirmation: string;
+            previewFile: string;
+            size: string;
+            uploadFile: string;
         };
         getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
         createDirectory?: ((request: CreateDirectoryRequest) => Promise<void>) | undefined;

package/dist/components/FileExplorerCreateDirectory.svelte

@@ -4,20 +4,13 @@ export let createDirectoryModalOpen = false;
 export let documents;
 export let createDirectory;
 export let translations;
-$: existingFoldersInPath = getExistingFoldersInPath(createDirectoryPath, $documents);
-$: directoryAlreadyExists = existingFoldersInPath.some((x) => x.name === request.name);
-let request;
+let request = { path: "", name: "" };
 let submitting = false;
 let input = void 0;
-initDocumentUpload();
-$: if (createDirectoryModalOpen) initDocumentUpload();
+$: existingFoldersInPath = getExistingFoldersInPath(createDirectoryPath, $documents);
+$: directoryAlreadyExists = existingFoldersInPath.some((x) => x.name === request.name);
+$: request.path = createDirectoryPath ?? "";
 $: if (input) input.focus();
-function initDocumentUpload() {
-  request = {
-    path: createDirectoryPath,
-    name: ""
-  };
-}
 async function submitFiles() {
   submitting = true;
   await createDirectory(request).then(() => {
@@ -28,8 +21,7 @@ async function submitFiles() {
   documents.refresh();
 }
 function getExistingFoldersInPath(path, documents2) {
-  if (!path || !documents2) return [];
-  const pathParts = path.split("/");
+  const pathParts = path ? path.split("/") : [];
   let existingFoldersInPath2 = documents2.filter((x) => x.type === "directory");
   for (const pathPart of pathParts) {
     const currentFolder = existingFoldersInPath2.find((document) => document.name === pathPart);
@@ -50,7 +42,13 @@ function getExistingFoldersInPath(path, documents2) {
       error={directoryAlreadyExists ? translations.directoryAlreadyExists : undefined}
       floatError
     >
-      <input bind:this={input} type="text" bind:value={request.name}>
+      <input
+        bind:this={input}
+        id="file-explorer-create-directory-name"
+        placeholder={translations.createDirectoryPlaceholder}
+        type="text"
+        bind:value={request.name}
+      />
     </FormElement>
   </div>
   <svelte:fragment slot="footer">

package/dist/components/FileExplorerCreateDirectory.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Refreshable } from '@securancy/svelte-utilities';
 import type { CreateDirectoryRequest, DocumentTranslations, FileSystemItem } from '../models/index.js';
 declare const __propDef: {
     props: {
-        createDirectoryPath: string;
+        createDirectoryPath: string | undefined;
         createDirectoryModalOpen?: boolean;
         documents: Refreshable<FileSystemItem[]>;
         createDirectory: (request: CreateDirectoryRequest) => Promise<void>;

package/dist/components/FileExplorerDirectory.svelte

@@ -2,7 +2,6 @@
 import FileExplorerDirectoryColumn from "./FileExplorerDirectoryColumn.svelte";
 import FileExplorerFileDetailColumn from "./FileExplorerFileDetailColumn.svelte";
 import FileExplorerDirectoryIndex from "./FileExplorerDirectoryIndex.svelte";
-import { joinPaths } from "../utilities";
 export let item;
 export let translations;
 export let routePrefix;
@@ -10,7 +9,14 @@ export let currentPath;
 export let canEdit;
 export let displayMode;
 export let getFilePreview;
-$: activeFileItem = item.children.find((fi) => currentPath.startsWith(joinPaths(fi.path, fi.name)));
+$: currentPathParts = currentPath.split("/");
+$: activeFileItem = item.children.find((fileItem) => {
+  const parts = [
+    ...fileItem.path.split("/").filter((part) => part !== ""),
+    fileItem.name
+  ];
+  return parts.every((part, index) => currentPathParts[index] === part);
+});
 function canEditItem(item2, canEdit2) {
   return typeof canEdit2 === "function" ? canEdit2(item2) : canEdit2 === true;
 }

package/dist/components/FileExplorerDirectoryColumn.svelte

@@ -2,7 +2,7 @@
 import {} from "..";
 import { resize, ResizeDirections } from "@securancy/svelte-utilities";
 import { Icon, Popover, PopoverItem } from "@securancy/svelte-components";
-import { getExtension, openItem } from "../utilities/index.js";
+import { getExtension, getItemHref } from "../utilities/index.js";
 import FileIcon from "./FileIcon.svelte";
 import { joinPaths } from "../utilities/index.js";
 const dispatch = createEventDispatcher();
@@ -79,7 +79,7 @@ function handleDragOver(event) {
         </span>
         {#if canEdit}
           <Popover placement="bottom-end" trigger="click">
-            <button slot="trigger" type="button">
+            <button slot="trigger" title={translations.createItemTitle} type="button">
               <Icon class="fa-solid fa-add" />
             </button>
             <PopoverItem closeOnClick on:click={createDirectory}>{translations.createDirectory}</PopoverItem>
@@ -89,12 +89,11 @@ function handleDragOver(event) {
       </div>
       {#if item.children.length > 0}
         {#each item.children as child}
-          <button
+          <a
             class="file-explorer__list-item"
             class:file-explorer__list-item--active={activeFileItem === child}
+            href={getItemHref(child, routePrefix)}
             title={translations.itemTitle(child)}
-            type="button"
-            on:click={() => openItem(child, routePrefix)}
           >
             {#if child.type === 'directory'}
               <Icon class="fa-light fa-folder{activeFileItem === child ? '-open' : ''}" />
@@ -105,7 +104,7 @@ function handleDragOver(event) {
             {#if child.type === 'directory'}
               <Icon class="fa-light fa-sm fa-chevron-right" size="custom" />
             {/if}
-          </button>
+          </a>
         {/each}
       {:else}
         <p class="file-explorer__message">

package/dist/components/FileExplorerDirectoryIndex.svelte

@@ -2,7 +2,7 @@
 import { createEventDispatcher } from "svelte";
 import { resize, ResizeDirections } from "@securancy/svelte-utilities";
 import { Icon, Popover, PopoverItem } from "@securancy/svelte-components";
-import { getExtension, joinPaths, openItem } from "../utilities/index.js";
+import { getExtension, getItemHref, joinPaths } from "../utilities/index.js";
 const dispatch = createEventDispatcher();
 export let item;
 export let routePrefix;
@@ -38,7 +38,7 @@ function createDirectory() {
           {#if canEdit}
             <div class="inline-block">
               <Popover placement="bottom-end" trigger="click">
-                <button slot="trigger" type="button">
+                <button slot="trigger" title={translations.createItemTitle} type="button">
                   <Icon class="fa-solid fa-add" />
                 </button>
                 <PopoverItem closeOnClick on:click={createDirectory}>{translations.createDirectory}</PopoverItem>
@@ -48,12 +48,11 @@ function createDirectory() {
           {/if}
         </div>
         {#each item.children as child}
-          <button
+          <a
             class="file-explorer__grid-item"
             class:file-explorer__grid-item--active={activeFileItem === child}
+            href={getItemHref(child, routePrefix)}
             title={translations.itemTitle(child)}
-            type="button"
-            on:click={() => openItem(child, routePrefix)}
           >
             {#if child.type === 'directory'}
               <Icon
@@ -64,7 +63,7 @@ function createDirectory() {
               <FileIcon extension={getExtension(child.name)} size="grid" />
             {/if}
             <span>{child.name}</span>
-          </button>
+          </a>
         {:else}
           <p class="file-explorer__message">
             {translations.emptyDirectory}

package/dist/components/FileExplorerDisplayModeSwitcher.svelte

@@ -1,11 +1,8 @@
 <script>import { FileExplorerDisplayMode } from "../index.js";
 import { Icon } from "@securancy/svelte-components";
 export let displayMode;
+export let translations;
 let modes = Object.values(FileExplorerDisplayMode);
-const modeLabels = {
-  columns: "Columns",
-  index: "Full directory"
-};
 const modeIcons = {
   columns: "fa-columns-3",
   index: "fa-grid"
@@ -15,8 +12,8 @@ const modeIcons = {
 <div class="file-explorer__display-mode-switcher">
   {#each modes as mode}
     <label
-      aria-label={modeLabels[mode]}
-      title="Switch display mode to '{modeLabels[mode].toLowerCase()}'"
+      aria-label={translations.displayModeLabels[mode]}
+      title="{translations.displayModeSwitch} {translations.displayModeLabels[mode].toLowerCase()}"
     >
       <input
         name="displayMode"

package/dist/components/FileExplorerDisplayModeSwitcher.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { FileExplorerDisplayMode } from '../index.js';
+import { type DocumentTranslations, FileExplorerDisplayMode } from '../index.js';
 declare const __propDef: {
     props: {
         displayMode: FileExplorerDisplayMode;
+        translations: DocumentTranslations;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/FileExplorerFileDetailColumn.svelte

@@ -74,7 +74,7 @@ async function refresh(_fileItem) {
         {/if}
         {#if canEdit}
           <div class="file-explorer-preview__info">
-            <button type="button" on:click={() => dispatch('delete-file', fileItem)}>
+            <button id="file-explorer-delete-file" type="button" on:click={() => dispatch('delete-file', fileItem)}>
               <Icon class="fa-solid fa-trash" />
             </button>
           </div>

package/dist/models/translations.d.ts

@@ -1,22 +1,32 @@
 import type { FileSystemItem } from './file-item.js';
 export declare const defaultTranslations: {
-    createDirectoryModalTitle: string;
     cancel: string;
     create: string;
-    creating: string;
-    itemTitle: (item: FileSystemItem) => string;
-    emptyDirectory: string;
-    previewFile: string;
+    createDirectory: string;
+    createDirectoryModalTitle: string;
+    createDirectoryPlaceholder: string;
+    createItemTitle: string;
     createdAt: string;
-    modifiedAt: string;
+    creating: string;
+    delete: string;
     deleteFile: string;
     deleteFileConfirmation: string;
     deleting: string;
-    delete: string;
-    createDirectory: string;
-    uploadFile: string;
-    size: string;
-    items: string;
     directoryAlreadyExists: string;
+    displayModeLabels: {
+        columns: string;
+        index: string;
+    };
+    displayModeSwitch: string;
+    emptyDirectory: string;
+    itemTitle: (item: FileSystemItem) => string;
+    items: string;
+    modifiedAt: string;
+    override: string;
+    overrideFiles: string;
+    overrideFilesConfirmation: string;
+    previewFile: string;
+    size: string;
+    uploadFile: string;
 };
 export type DocumentTranslations = typeof defaultTranslations;

package/dist/models/translations.js

@@ -1,20 +1,30 @@
 export const defaultTranslations = {
-    createDirectoryModalTitle: 'Create new directory',
     cancel: 'Cancel',
     create: 'Create',
-    creating: 'Creating...',
-    itemTitle: (item) => `Open ${item.type === 'directory' ? 'directory' : 'file'} ${item.name}`,
-    emptyDirectory: 'Empty directory',
-    previewFile: 'Preview file',
+    createDirectory: 'Create directory',
+    createDirectoryModalTitle: 'Create new directory',
+    createDirectoryPlaceholder: 'Name',
+    createItemTitle: 'Create directory or upload file',
     createdAt: 'Created at',
-    modifiedAt: 'Last modified at',
+    creating: 'Creating...',
+    delete: 'Delete',
     deleteFile: 'Delete file',
     deleteFileConfirmation: 'Are you sure you want to delete:',
     deleting: 'Deleting...',
-    delete: 'Delete',
-    createDirectory: 'Create directory',
-    uploadFile: 'Upload file',
-    size: 'Size',
-    items: 'Items',
     directoryAlreadyExists: 'Directory already exists',
+    displayModeLabels: {
+        columns: 'Columns',
+        index: 'Full directory',
+    },
+    displayModeSwitch: 'Switch display mode to',
+    emptyDirectory: 'Empty directory',
+    itemTitle: (item) => `Open ${item.type === 'directory' ? 'directory' : 'file'} ${item.name}`,
+    items: 'Items',
+    modifiedAt: 'Last modified at',
+    override: 'Override',
+    overrideFiles: 'Override files',
+    overrideFilesConfirmation: 'These files already exist, do you want to override them?',
+    previewFile: 'Preview file',
+    size: 'Size',
+    uploadFile: 'Upload file',
 };

package/dist/utilities/file-utilities.d.ts

@@ -1,5 +1,5 @@
 import type { FileSystemItem } from '../models/file-item.js';
-export declare function openItem(item: FileSystemItem, routePrefix: string): Promise<void>;
+export declare function getItemHref(item: FileSystemItem, routePrefix: string): string;
 export declare function getExtension(path: string): string;
 export declare const imageExtensions: string[];
 export declare const videoExtensions: string[];

package/dist/utilities/file-utilities.js

@@ -1,5 +1,4 @@
-import { goto } from '$app/navigation';
-export async function openItem(item, routePrefix) {
+export function getItemHref(item, routePrefix) {
     const itemPath = [
         ...routePrefix.split('/'),
         ...item.path.split('/'),
@@ -8,7 +7,7 @@ export async function openItem(item, routePrefix) {
         .filter((node) => node !== '')
         .map(encodeURIComponent)
         .join('/');
-    await goto(itemPath.startsWith('/') ? itemPath : `/${itemPath}`);
+    return itemPath.startsWith('/') ? itemPath : `/${itemPath}`;
 }
 export function getExtension(path) {
     // extract file name from full path (supports `\\` and `/` separators)
@@ -48,7 +47,7 @@ export function formatBytesParts(bytes, decimals = 2) {
     return [Number.parseFloat((bytes / Math.pow(k, index)).toFixed(dm)), sizes[index]];
 }
 export function joinPaths(...paths) {
-    return paths
-        .filter((path) => path !== '')
+    return '/' + paths
+        .map((path) => path.split('/').filter((part) => part !== '').join('/'))
         .join('/');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@securancy/file-explorer",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "private": false,
   "svelte": "./dist/index.js",
@@ -47,13 +47,12 @@
     "vite": "^5.3.4",
     "zod": "^3.23.8",
     "@securancy/eslint-config": "0.2.1",
+    "@securancy/svelte-components": "4.3.1",
     "@securancy/stylelint-config": "0.1.2",
-    "@securancy/svelte-components": "4.3.0",
-    "@securancy/svelte-utilities": "2.0.1"
+    "@securancy/svelte-utilities": "2.0.2"
   },
   "peerDependencies": {
-    "svelte": "^4.2.18",
-    "@sveltejs/kit": "^2.5.18"
+    "svelte": "^4.2.18"
   },
   "scripts": {
     "dev": "vite dev",