@dile/crud 2.8.7 → 2.9.1

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

@@ -80,7 +80,7 @@ export class DileAjax extends DileAxios(DileI18nMixin(LitElement)) {
         }
         this.dispatchEvent(new CustomEvent('ajax-success', { detail }));
       } else {
-        this.dispatchError(this.translations.http_unhandled_success, response.data);
+        this.dispatchError(this.translations.http_unhandled_success, response.data, [], response.status);
       }
     })
     .catch(async err => {
@@ -112,50 +112,51 @@ export class DileAjax extends DileAxios(DileI18nMixin(LitElement)) {
       const status = res.status;
       switch (status) {
         case 422: 
-          this.dispatchError(res.data.message || this.translations.http_422, res.data, this.getValidationErrors(res.data));
+          this.dispatchError(res.data.message || this.translations.http_422, res.data, this.getValidationErrors(res.data), status);
           break;
         case 400: 
-          this.dispatchError(res.data.message || this.translations.http_400, res.data, this.getValidationErrors(res.data));
+          this.dispatchError(res.data.message || this.translations.http_400, res.data, this.getValidationErrors(res.data), status);
           break;
         case 404:
-          this.dispatchError(res.data.message || this.translations.http_404, res.data);
+          this.dispatchError(res.data.message || this.translations.http_404, res.data, [], status);
           break;
         case 401:
-          this.dispatchError(res.data.message || this.translations.http_401, res.data);
+          this.dispatchError(res.data.message || this.translations.http_401, res.data, [], status);
           break;
         case 403:
-          this.dispatchError(res.data.message || this.translations.http_403, res.data);
+          this.dispatchError(res.data.message || this.translations.http_403, res.data, [], status);
           break;
         case 405:
-          this.dispatchError(res.data.message || this.translations.http_405, res.data);
+          this.dispatchError(res.data.message || this.translations.http_405, res.data, [], status);
           break;
         case 413:
-          this.dispatchError(res.data.message || this.translations.http_413, res.data);
+          this.dispatchError(res.data.message || this.translations.http_413, res.data, [], status);
           break;
         case 419:
-          this.dispatchError(res.data.message || this.translations.http_419, res.data);
+          this.dispatchError(res.data.message || this.translations.http_419, res.data, [], status);
           break;
         case 502:
-          this.dispatchError(res.data.message || this.translations.http_502, res.data);
+          this.dispatchError(res.data.message || this.translations.http_502, res.data, [], status);
           break;
         case 504:
-          this.dispatchError(res.data.message || this.translations.http_504, res.data);
+          this.dispatchError(res.data.message || this.translations.http_504, res.data, [], status);
           break;
         default:
-          this.dispatchError(res.data.message || this.translations.http_other_error, res.data);
+          this.dispatchError(res.data.message || this.translations.http_other_error, res.data, [], status);
       }
     } else {
       this.dispatchRawError(err, null);
-      this.dispatchError(this.translations.http_no_response, {});
+      this.dispatchError(this.translations.http_no_response, {}, [], null);
     }
   }
 
-  dispatchError(message, data, errors = []) {
+  dispatchError(message, data, errors = [], status = null) {
     this.dispatchEvent(new CustomEvent('ajax-error', {
       detail: {
         message,
         data,
-        errors
+        errors,
+        status
       } 
     }));
   }
@@ -191,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/components/ui/crud-sort-form.spec.js

@@ -96,7 +96,7 @@ describe('dile-crud-sort-form', () => {
     let receivedDetail = null;
     el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
 
-    el.shadowRoot.querySelector('dile-order-switch[name="year"]').shadowRoot.querySelector('span').click();
+    el.shadowRoot.querySelector('dile-order-switch[name="year"]').shadowRoot.querySelector('a').click();
     await el.updateComplete;
 
     expect(el.sortField).toBe('year');
@@ -117,7 +117,7 @@ describe('dile-crud-sort-form', () => {
     let receivedDetail = null;
     el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
 
-    const label = () => el.shadowRoot.querySelector('dile-order-switch[name="name"]').shadowRoot.querySelector('span');
+    const label = () => el.shadowRoot.querySelector('dile-order-switch[name="name"]').shadowRoot.querySelector('a');
 
     label().click();
     await el.updateComplete;

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.7",
+  "version": "2.9.1",
   "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.14.0",
+    "@dile/ui": "^3.16.1",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2dbcfcfc126715e1f21c28806714f5f59b89d93b"
+  "gitHead": "bb98f6a98cd4fc1034d9fb05fe35cf6379cda54f"
 }