feat(#79): add relative path property to keep tree structures.

Author: hackingharold

bun.lockb

@@ -14,29 +14,29 @@
     "lint:material": "ng lint material"
   },
   "dependencies": {
-    "@angular/animations": "^18.0.1",
-    "@angular/cdk": "~18.0.1",
-    "@angular/common": "^18.0.1",
-    "@angular/compiler": "^18.0.1",
-    "@angular/core": "^18.0.1",
-    "@angular/forms": "^18.0.1",
-    "@angular/material": "~18.0.1",
-    "@angular/platform-browser": "^18.0.1",
-    "@angular/platform-browser-dynamic": "^18.0.1",
-    "@angular/router": "^18.0.1",
+    "@angular/animations": "^18.0.2",
+    "@angular/cdk": "~18.0.2",
+    "@angular/common": "^18.0.2",
+    "@angular/compiler": "^18.0.2",
+    "@angular/core": "^18.0.2",
+    "@angular/forms": "^18.0.2",
+    "@angular/material": "~18.0.2",
+    "@angular/platform-browser": "^18.0.2",
+    "@angular/platform-browser-dynamic": "^18.0.2",
+    "@angular/router": "^18.0.2",
     "rxjs": "~7.8.1",
     "tslib": "^2.3.0",
     "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.2",
+    "@angular-devkit/build-angular": "^18.0.3",
     "@angular-eslint/builder": "^18.0.1",
     "@angular-eslint/eslint-plugin": "18.0.1",
     "@angular-eslint/eslint-plugin-template": "18.0.1",
     "@angular-eslint/schematics": "^18.0.1",
     "@angular-eslint/template-parser": "18.0.1",
-    "@angular/cli": "^18.0.2",
-    "@angular/compiler-cli": "^18.0.1",
+    "@angular/cli": "^18.0.3",
+    "@angular/compiler-cli": "^18.0.2",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^20.5.9",
     "@typescript-eslint/eslint-plugin": "^6.10.0",

package.json

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { nonNullable } from '../coercion';
+import { File } from './../file-input';
 
 @Injectable({
   providedIn: 'root',
@@ -43,6 +44,10 @@ export class DropzoneService {
 
     if (this._isFile(entry)) {
       const file = await this._readFilePromise(entry);
+
+      // Manually set the `relativePath` property for dropped files.
+      file.relativePath = entry.fullPath?.slice(1) ?? '';
+
       return [file];
     }
 

projects/cdk/src/lib/dropzone/dropzone.service.ts

@@ -1,3 +1,10 @@
+/**
+ * To achieve a consistent behavior when dropping directories,
+ * we add an additional property to the `File` object.
+ * This will only work with the `webkitdirectories` attribute.
+ */
+export type File = globalThis.File & { relativePath?: string };
+
 /**
  * A file input element can either be empty,
  * hold a single file or hold multiple files.

projects/cdk/src/lib/file-input/file-input-value.ts

@@ -80,6 +80,17 @@ describe('FileInputDirective', () => {
       expect(element.selectionChange.emit).toHaveBeenCalledWith(file);
     });
 
+    it('should reset value on clear', () => {
+      const element = selectors.fileInput;
+      const file = getFile();
+
+      element._fileValue = file;
+      expect(element.value).toEqual(file);
+
+      element.writeValue(null);
+      expect(element.value).toBeNull();
+    });
+
     it('should return the focused state correctly', () => {
       const element = selectors.fileInput;
       const input = selectors.inputElement.nativeElement as HTMLInputElement;
@@ -175,6 +186,28 @@ describe('FileInputDirective', () => {
       element.handleFileDrop(files2);
       expect(element.value).toEqual(files2);
     });
+
+    it('should replace value with empty array', () => {
+      const element = selectors.fileInput;
+      const files = [getFile(), getFile()];
+
+      element.handleFileDrop(files);
+      expect(element.value).toEqual(files);
+
+      element.handleFileDrop([]);
+      expect(element.value).toEqual([]);
+    });
+
+    it('should reset multiple value when overriding value', () => {
+      const element = selectors.fileInput;
+      const files = [getFile(), getFile()];
+
+      element.handleFileDrop(files);
+      expect(element.value).toEqual(files);
+
+      element.writeValue([]);
+      expect(element.value).toEqual([]);
+    });
   });
 
   describe('mode=append', () => {

projects/cdk/src/lib/file-input/file-input.directive.spec.ts

@@ -57,7 +57,7 @@ export class FileInputDirective implements ControlValueAccessor, OnInit, OnChang
     if (newValue !== this._value || Array.isArray(newValue)) {
       this._assertMultipleValue(newValue);
 
-      this._value = this._appendOrReplace(newValue);
+      this._value = newValue;
       this._updateErrorState();
 
       this._onTouched?.();
@@ -178,7 +178,10 @@ export class FileInputDirective implements ControlValueAccessor, OnInit, OnChang
   @HostListener('change', ['$event.target.files'])
   _handleChange(fileList: FileList) {
     if (this.disabled) return;
-    this._fileValue = this.multiple ? Array.from(fileList) : fileList.item(0);
+
+    const files = this.multiple ? Array.from(fileList) : fileList.item(0);
+    const filesWithPaths = this._copyRelativePaths(files);
+    this._fileValue = this._appendOrReplace(filesWithPaths);
 
     this.selectionChange.emit(this._fileValue);
     this._onChange?.(this._fileValue);
@@ -190,7 +193,7 @@ export class FileInputDirective implements ControlValueAccessor, OnInit, OnChang
   /** Handles the drop of a file array. */
   handleFileDrop(files: File[]) {
     if (this.disabled) return;
-    this._fileValue = this.multiple ? files : files[0];
+    this._fileValue = this._appendOrReplace(this.multiple ? files : files[0]);
 
     this.selectionChange.emit(this._fileValue);
     this._onChange?.(this._fileValue);
@@ -225,6 +228,25 @@ export class FileInputDirective implements ControlValueAccessor, OnInit, OnChang
     }
   }
 
+  /**
+   * On directory drops, the readonly `webkitRelativePath` property is not available.
+   * We manually set the `relativePath` property for dropped file trees instead.
+   * To achieve a consistent behavior when using the file picker, we copy the value.
+   */
+  private _copyRelativePaths(value: FileInputValue) {
+    if (!value) return value;
+
+    if (Array.isArray(value)) {
+      return value.map((file) => {
+        file.relativePath = file.webkitRelativePath;
+        return file;
+      });
+    }
+
+    value.relativePath = value.webkitRelativePath;
+    return value;
+  }
+
   /** Asserts that the provided value type matches the input element's multiple attribute. */
   private _assertMultipleValue(value: FileInputValue) {
     if (this.multiple && !Array.isArray(value || [])) {

projects/cdk/src/lib/file-input/file-input.directive.ts

@@ -78,8 +78,8 @@ Now you can use it in your markup.
 </mat-form-field>
 ```
 
-The dropzone supports dropping folders by default.
-All files from subdirectories will be provided as a flat `File[]`.
+Use the `webkitdirectories` attribute to support uploading folders.
+All files from subdirectories will be provided as a flat `File[]`, but with an additional `relativePath` property to keep tree structures.
 
 ## Usage with FormControl and validation