@dile/ui 3.15.0 → 3.16.1

package/components/drop-file/drop-file.spec.js

@@ -109,4 +109,106 @@ describe('dile-drop-file', () => {
     expect(eventDetail).toBeTruthy();
     expect(eventDetail.file).toBeNull();
   });
+
+  describe('multiple mode', () => {
+    function createFile(name, content = 'content') {
+      return new File([content], name, { lastModified: 1 });
+    }
+
+    function dropFiles(el, files) {
+      const dataTransfer = new DataTransfer();
+      files.forEach(file => dataTransfer.items.add(file));
+      const dropZone = el.shadowRoot.querySelector('#dropZone');
+      dropZone.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true, cancelable: true }));
+      return el.updateComplete;
+    }
+
+    it('renders the file input with the multiple attribute', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      expect(el.shadowRoot.querySelector('input[type="file"]').hasAttribute('multiple')).toBe(true);
+    });
+
+    it('does not render the multiple attribute by default', async () => {
+      const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+      expect(el.shadowRoot.querySelector('input[type="file"]').hasAttribute('multiple')).toBe(false);
+    });
+
+    it('accepts several dropped files and renders a preview for each one', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      let eventDetail = null;
+      el.addEventListener('dile-drop-file-changed', (e) => { eventDetail = e.detail; });
+
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      expect(el.shadowRoot.querySelectorAll('dile-file-preview').length).toBe(2);
+      expect(el.value.map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+      expect(el.getFiles().length).toBe(2);
+      expect(el.shadowRoot.querySelector('#fileInput').files.length).toBe(2);
+      expect(eventDetail.files.map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+      expect(eventDetail.file.name).toBe('a.txt');
+    });
+
+    it('accumulates files between selections without duplicates', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt')]);
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      expect(el.value.map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+      expect(el.shadowRoot.querySelectorAll('dile-file-preview').length).toBe(2);
+    });
+
+    it('removes a single file with removeFile', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt'), createFile('c.txt')]);
+
+      el.removeFile(1);
+      await el.updateComplete;
+
+      expect(el.value.map(file => file.name)).toEqual(['a.txt', 'c.txt']);
+      expect(el.shadowRoot.querySelector('#fileInput').files.length).toBe(2);
+    });
+
+    it('removes a file when its preview clear link is clicked', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      const preview = el.shadowRoot.querySelectorAll('dile-file-preview')[0];
+      await preview.updateComplete;
+      preview.shadowRoot.querySelector('a').click();
+      await el.updateComplete;
+
+      expect(el.value.map(file => file.name)).toEqual(['b.txt']);
+    });
+
+    it('discards files with invalid extensions and keeps the valid ones', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      el.allowedExtensions = ['pdf'];
+      await dropFiles(el, [createFile('a.pdf'), createFile('b.exe')]);
+
+      expect(el.value.map(file => file.name)).toEqual(['a.pdf']);
+      expect(el.errored).toBe(true);
+      expect(el.shadowRoot.querySelector('.message.errored-msg')).toBeTruthy();
+    });
+
+    it('clears all the files', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      el.clear();
+      await el.updateComplete;
+
+      expect(el.value).toEqual([]);
+      expect(el.shadowRoot.querySelectorAll('dile-file-preview').length).toBe(0);
+    });
+
+    it('sets all the files as form value', async () => {
+      document.body.innerHTML = '<form><dile-drop-file name="docs" multiple></dile-drop-file></form>';
+      const el = document.querySelector('dile-drop-file');
+      await el.updateComplete;
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      const formData = new FormData(document.querySelector('form'));
+      expect(formData.getAll('docs').map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+    });
+  });
 });

package/components/drop-file/src/DileDropFile.js

@@ -64,6 +64,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
       name: { type: String, reflect: true },
       accept: { type: String },
       capture: { type: String },
+      multiple: { type: Boolean, reflect: true },
+      files: { state: true },
     };
   }
 
@@ -83,6 +85,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     this.allowedExtensions = [];
     this.accept = '';
     this.capture = '';
+    this.multiple = false;
+    this.files = [];
     this.internals = this.attachInternals();
   } 
 
@@ -109,12 +113,23 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
         ${this.dropLabelTemplate}
       </div>
       ${this.messageTemplate}
-      <input type="file" id="fileInput" @change=${this._handleFileInput} accept=${ifDefined(this.accept || undefined)} capture=${ifDefined(this.capture || undefined)}>
-      <dile-file-preview 
-        fileName="${this.fileName}"
-        selectedFileLabel="${this.selectedFileLabel}"
-        @dile-file-clear=${this.clear}
-      ></dile-file-preview>
+      <input type="file" id="fileInput" ?multiple=${this.multiple} @change=${this._handleFileInput} accept=${ifDefined(this.accept || undefined)} capture=${ifDefined(this.capture || undefined)}>
+      ${this.multiple
+        ? this.files.map((file, index) => html`
+          <dile-file-preview
+            fileName="${file.name}"
+            selectedFileLabel="${this.selectedFileLabel}"
+            @dile-file-clear=${() => this.removeFile(index)}
+          ></dile-file-preview>
+        `)
+        : html`
+          <dile-file-preview 
+            fileName="${this.fileName}"
+            selectedFileLabel="${this.selectedFileLabel}"
+            @dile-file-clear=${this.clear}
+          ></dile-file-preview>
+        `
+      }
     `;
   }
 
@@ -167,6 +182,10 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
   }
 
   _processFile(files) {
+    if (this.multiple) {
+      this._processMultipleFiles(files);
+      return;
+    }
     this.internals.setFormValue(files.length > 0 ? files[0] : null);
     if (files.length > 0) {
       this.fileName = files[0].name;
@@ -183,6 +202,56 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     }
   }
 
+  _processMultipleFiles(files) {
+    const incoming = Array.from(files);
+    if (incoming.length === 0) {
+      // Restore the input files, as a canceled dialog empties it
+      this._syncFileInput();
+      return;
+    }
+    const validFiles = incoming.filter(file => this._isValidExtension(file.name));
+    const newFiles = validFiles.filter(file => !this.files.some(current => this._isSameFile(current, file)));
+    this.files = [...this.files, ...newFiles];
+    if (validFiles.length < incoming.length) {
+      this.message = `${this.extensionErrorMessage} ${this.allowedExtensions.join(', ')}`;
+      this.errored = true;
+    } else {
+      this.message = this.firstMessage || '';
+      this.errored = false;
+    }
+    this._syncFiles();
+  }
+
+  _isSameFile(a, b) {
+    return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+  }
+
+  _syncFileInput() {
+    if (!this.fileInput) return;
+    const dataTransfer = new DataTransfer();
+    this.files.forEach(file => dataTransfer.items.add(file));
+    this.fileInput.files = dataTransfer.files;
+  }
+
+  _syncFiles() {
+    this._syncFileInput();
+    if (this.files.length > 0) {
+      const formData = new FormData();
+      this.files.forEach(file => formData.append(this.name || 'files', file));
+      this.internals.setFormValue(formData);
+    } else {
+      this.internals.setFormValue(null);
+    }
+    this.emmitChange();
+    this._emitDropFileChanged(this.files[0] || null);
+  }
+
+  removeFile(index) {
+    if (index < 0 || index >= this.files.length) return;
+    this.files = this.files.filter((_, i) => i !== index);
+    this._syncFiles();
+  }
+
   _isValidExtension(fileName) {
     if(this.allowedExtensions.length === 0) {
       return true;
@@ -216,7 +285,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
       bubbles: true,
       composed: true,
       detail: {
-        file: file
+        file: file,
+        files: this.multiple ? [...this.files] : (file ? [file] : []),
       }
     }));
   }
@@ -228,16 +298,23 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
   clear() {
     this.fileInput.value = "";
     this.fileName = "";
+    this.files = [];
     this.internals.setFormValue(null);
     this._emitDropFileChanged(null);
     this.emmitChange();
   }
 
   getFiles() {
+    if (this.multiple) {
+      return [...this.files];
+    }
     return this.fileInput.files;
   }
 
   get value() {
+    if (this.multiple) {
+      return [...this.files];
+    }
     if(this.fileInput) {
       return this.fileInput.files[0];
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.15.0",
+  "version": "3.16.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ef91e1892e270fade848c64082184fa3fbddb53"
+  "gitHead": "bb98f6a98cd4fc1034d9fb05fe35cf6379cda54f"
 }