@dile/crud 2.8.8 → 2.9.2

package/components/ajax/ajax.spec.js

@@ -0,0 +1,35 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './ajax.js';
+
+describe('dile-ajax', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('appends arrays of files as multiple "key[]" entries when sending data as FormData', async () => {
+    const el = document.createElement('dile-ajax');
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const files = [new File(['a'], 'a.txt'), new File(['b'], 'b.txt')];
+    el.data = { title: 'Docs', files, empty: null };
+    el._prepareFormData();
+
+    expect(el.formData.get('title')).toBe('Docs');
+    expect(el.formData.getAll('files[]').map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+    expect(el.formData.has('files')).toBe(false);
+    expect(el.formData.has('empty')).toBe(false);
+  });
+
+  it('keeps sending other arrays as a single entry', async () => {
+    const el = document.createElement('dile-ajax');
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    el.data = { tags: [1, 2, 3] };
+    el._prepareFormData();
+
+    expect(el.formData.get('tags')).toBe('1,2,3');
+    expect(el.formData.has('tags[]')).toBe(false);
+  });
+});

package/components/ajax/src/DileAjax.js

@@ -192,12 +192,22 @@ export class DileAjax extends DileAxios(DileI18nMixin(LitElement)) {
     this.formData = new FormData();
   }
 
+  _isFileArray(value) {
+    return Array.isArray(value) && value.some(item => item instanceof Blob);
+  }
+
   _addObjectToFormData(data) {
     if (!this.formData) {
-      this.createFormData();
+      this._createFormData();
     }
     for (const key in data) {
-      if (data[key] !== null && data[key] !== undefined) {
+      if (this._isFileArray(data[key])) {
+        data[key].forEach(item => {
+          if (item !== null && item !== undefined) {
+            this.formData.append(`${key}[]`, item);
+          }
+        });
+      } else if (data[key] !== null && data[key] !== undefined) {
         this.formData.append(key, data[key]);
       }
     }

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

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './file-uploader.js';
+
+describe('dile-file-uploader', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderUploader(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-file-uploader');
+    await el.updateComplete;
+    const form = el.shadowRoot.querySelector('dile-file-uploader-form');
+    await form.updateComplete;
+    const dropFile = form.shadowRoot.querySelector('dile-drop-file');
+    await dropFile.updateComplete;
+    return { el, form, dropFile };
+  }
+
+  it('uses a single file field named "file" by default', async () => {
+    const { dropFile } = await renderUploader('<dile-file-uploader endpoint="/upload"></dile-file-uploader>');
+    expect(dropFile.getAttribute('name')).toBe('file');
+    expect(dropFile.multiple).toBe(false);
+  });
+
+  it('uses a multiple field named "files" when multiple is set', async () => {
+    const { form, dropFile } = await renderUploader('<dile-file-uploader endpoint="/upload" multiple></dile-file-uploader>');
+    expect(dropFile.getAttribute('name')).toBe('files');
+    expect(dropFile.multiple).toBe(true);
+    expect(form.getData()).toEqual({ files: [] });
+  });
+});

package/components/file-uploader/src/DileFileUploader.js

@@ -20,6 +20,7 @@ export class DileFileUploader extends DileI18nMixin(LitElement) {
       saveLabel: { type: String },
       allowedExtensions: { type: Array },
       responseAdapter: { type: Object },
+      multiple: { type: Boolean },
     };
   }
   
@@ -27,6 +28,7 @@ export class DileFileUploader extends DileI18nMixin(LitElement) {
     super();
     this.responseAdapter = new ResponseApiAdapter();
     this.allowedExtensions = ['*'];
+    this.multiple = false;
   }
 
   render() {
@@ -45,6 +47,7 @@ export class DileFileUploader extends DileI18nMixin(LitElement) {
           id="form"
           label="${this.selectLabelComputed(this.selectFileLabel, this.translations)}"
           .allowedExtensions=${this.allowedExtensions}
+          ?multiple=${this.multiple}
           .translations=${this.translations}
         ></dile-file-uploader-form>
       </dile-ajax-form>
@@ -52,7 +55,13 @@ export class DileFileUploader extends DileI18nMixin(LitElement) {
   }
 
   selectLabelComputed(label, translations) {
-    return label ? label : translations?.select_file_label ? translations.select_file_label : 'Select a file';
+    if (label) {
+      return label;
+    }
+    if (this.multiple) {
+      return translations?.select_files_label ? translations.select_files_label : 'Select files';
+    }
+    return translations?.select_file_label ? translations.select_file_label : 'Select a file';
   }
 
   saveLabelComputed(label, translations) {

package/components/file-uploader/src/DileFileUploaderForm.js

@@ -19,18 +19,20 @@ export class DileFileUploaderForm extends DileForm(LitElement) {
       label: { type: String },
       allowedExtensions: { type: Array },
       translations: { type: Object },
+      multiple: { type: Boolean },
     };
   }
 
   render() {
     return html`
       <dile-drop-file 
-        name="file"
+        name="${this.multiple ? 'files' : 'file'}"
         label="${this.label}" 
         id="dropfile" 
+        ?multiple=${this.multiple}
         .allowedExtensions=${this.allowedExtensions}
-        dropLabel="${this.translations.file_drop}"
-        buttonLabel="${this.translations.select_file}"
+        dropLabel="${this.multiple ? this.translations.files_drop : this.translations.file_drop}"
+        buttonLabel="${this.multiple ? this.translations.select_files : this.translations.select_file}"
         selectedFileLabel="${this.translations.selected_file}"
         extensionErrorMessage="${this.translations.extension_allowed}"
       ></dile-drop-file>

package/lib/i18n/en.js

@@ -51,6 +51,9 @@ export const translations = {
   file_drop: "Drop here your file",
   select_file: "Select file",
   selected_file: "Selected file",
+  select_files_label: "Select files",
+  files_drop: "Drop here your files",
+  select_files: "Select files",
   extension_allowed: "Only this file extensions are allowed: ",
   image_empty_file: "The selected file is empty",
   image_invalid_file: "The selected file is not a valid image or it's corrupted",

package/lib/i18n/es.js

@@ -51,6 +51,9 @@ export const translations = {
   file_drop: "Suelta aquí el archivo",
   select_file: "Seleccionar archivo",
   selected_file: "Archivo seleccionado",
+  select_files_label: "Selecciona archivos",
+  files_drop: "Suelta aquí los archivos",
+  select_files: "Seleccionar archivos",
   extension_allowed: "Solo se permiten estas extensiones: ",
   image_empty_file: "El archivo seleccionado está vacío",
   image_invalid_file: "El archivo seleccionado no es una imagen válida o está corrupto",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.8.8",
+  "version": "2.9.2",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "type": "module",
@@ -25,12 +25,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^3.15.0",
+    "@dile/ui": "^3.16.2",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ef91e1892e270fade848c64082184fa3fbddb53"
+  "gitHead": "0f1a6553d287b706db6f42c7001a25fdebc3bd3a"
 }