@securancy/file-explorer 1.0.4 → 1.0.6

package/dist/components/FileExplorer.svelte

@@ -9,6 +9,7 @@ import { Button, Modal } from "@securancy/svelte-components";
 import FileExplorerDirectory from "./FileExplorerDirectory.svelte";
 import { Icon } from "@securancy/svelte-components";
 import { fade } from "svelte/transition";
+import { pathsEqual } from "../utilities";
 export let displayMode = FileExplorerDisplayMode.Columns;
 export let filePath;
 export let documents;
@@ -29,6 +30,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 +53,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 +75,30 @@ async function handleUploadFile(event) {
     dispatch("upload-file", event.detail);
   }
 }
+async function uploadFilesInternal(request) {
+  const filesInDirectory = Array.from(flattenedFiles($documents)).filter((x) => pathsEqual(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 +132,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 +236,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/FileExplorerDirectoryColumn.svelte

@@ -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>

package/dist/components/FileExplorerDirectoryIndex.svelte

@@ -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>

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

@@ -7,3 +7,4 @@ export declare function isImage(path: string): boolean;
 export declare function formatBytes(bytes: number, decimals?: number): string;
 export declare function formatBytesParts(bytes: number, decimals?: number): [number, string];
 export declare function joinPaths(...paths: string[]): string;
+export declare function pathsEqual(path1: string, path2: string): boolean;

package/dist/utilities/file-utilities.js

@@ -48,6 +48,12 @@ export function formatBytesParts(bytes, decimals = 2) {
 }
 export function joinPaths(...paths) {
     return paths
+        .map((path) => path.split('/').filter((part) => part !== '').join('/'))
         .filter((path) => path !== '')
         .join('/');
 }
+export function pathsEqual(path1, path2) {
+    const path1Parts = path1.split('/').filter((part) => part !== '');
+    const path2Parts = path2.split('/').filter((part) => part !== '');
+    return path1Parts.length === path2Parts.length && path1Parts.every((part, index) => part === path2Parts[index]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@securancy/file-explorer",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "private": false,
   "svelte": "./dist/index.js",
@@ -48,8 +48,8 @@
     "zod": "^3.23.8",
     "@securancy/eslint-config": "0.2.1",
     "@securancy/stylelint-config": "0.1.2",
-    "@securancy/svelte-components": "4.3.0",
-    "@securancy/svelte-utilities": "2.0.1"
+    "@securancy/svelte-components": "4.3.2",
+    "@securancy/svelte-utilities": "2.0.2"
   },
   "peerDependencies": {
     "svelte": "^4.2.18"