@dile/crud 1.14.6 → 1.14.8

package/components/image-uploader/src/DileImageUploader.js

@@ -20,9 +20,14 @@ export class DileImageUploader extends DileI18nMixin(LitElement) {
       saveLabel: { type: String },
       allowedExtensions: { type: Array },
       responseAdapter: { type: Object },
+      maxFileSize: { type: Number },
+      minWidth: { type: Number },
+      maxWidth: { type: Number },
+      minHeight: { type: Number },
+      maxHeight: { type: Number },
     };
   }
-  
+
   constructor() {
     super();
     this.responseAdapter = new ResponseApiAdapter();
@@ -41,11 +46,16 @@ export class DileImageUploader extends DileI18nMixin(LitElement) {
         @save-success=${this.imageSaveSuccess}
         .responseAdapter=${this.responseAdapter}
       >
-        <dile-image-uploader-form 
+        <dile-image-uploader-form
           id="form"
           label="${this.selectLabelComputed(this.selectImageLabel, this.translations)}"
           .allowedExtensions=${this.allowedExtensions}
           .translations=${this.translations}
+          .maxFileSize=${this.maxFileSize}
+          .minWidth=${this.minWidth}
+          .maxWidth=${this.maxWidth}
+          .minHeight=${this.minHeight}
+          .maxHeight=${this.maxHeight}
         ></dile-image-uploader-form>
       </dile-ajax-form>
     `;

package/components/image-uploader/src/DileImageUploaderForm.js

@@ -1,6 +1,11 @@
 import { LitElement, html, css } from 'lit';
 import { DileForm } from '@dile/ui/mixins/form/index.js'
 import '@dile/ui/components/drop-file/drop-file.js';
+import { readImageFile } from '../../../lib/image/readImageFile.js';
+import { validateImageFile } from '../../../lib/image/validateImageFile.js';
+import { createThumbnail } from '../../../lib/image/createThumbnail.js';
+import { formatFileSize } from '../../../lib/image/formatFileSize.js';
+import { buildValidationMessages } from '../../../lib/image/buildValidationMessages.js';
 
 export class DileImageUploaderForm extends DileForm(LitElement) {
   static styles = [
@@ -11,6 +16,19 @@ export class DileImageUploaderForm extends DileForm(LitElement) {
       dile-drop-file {
         margin-bottom: 0;
       }
+      .image-summary {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin: 0.5rem 0;
+        font-size: var(--dile-file-preview-font-size, 0.8rem);
+      }
+      .image-summary img {
+        max-width: 60px;
+        max-height: 60px;
+        border-radius: 4px;
+        display: block;
+      }
     `
   ];
 
@@ -19,21 +37,101 @@ export class DileImageUploaderForm extends DileForm(LitElement) {
       label: { type: String },
       allowedExtensions: { type: Array },
       translations: { type: Object },
+      maxFileSize: { type: Number },
+      minWidth: { type: Number },
+      maxWidth: { type: Number },
+      minHeight: { type: Number },
+      maxHeight: { type: Number },
+      imageInfo: { state: true },
     };
   }
 
+  constructor() {
+    super();
+    this.imageInfo = null;
+    this._inspectToken = 0;
+  }
+
   render() {
     return html`
-      <dile-drop-file 
+      <dile-drop-file
         name="image"
-        label="${this.label}" 
-        id="dropfile" 
+        label="${this.label}"
+        id="dropfile"
         .allowedExtensions=${this.allowedExtensions}
         dropLabel="${this.translations.file_drop}"
         buttonLabel="${this.translations.select_file}"
         selectedFileLabel="${this.translations.selected_file}"
         extensionErrorMessage="${this.translations.extension_allowed}"
+        @element-changed=${this.handleFileChange}
       ></dile-drop-file>
+      ${this.imageSummaryTemplate}
     `;
   }
+
+  get imageSummaryTemplate() {
+    if (!this.imageInfo) {
+      return '';
+    }
+    return html`
+      <div class="image-summary">
+        <img src="${this.imageInfo.thumbnail}" alt="">
+        <span>${this.translations.image_dimensions_summary(this.imageInfo.width, this.imageInfo.height, formatFileSize(this.imageInfo.size))}</span>
+      </div>
+    `;
+  }
+
+  get dropFileEl() {
+    return this.renderRoot.querySelector('#dropfile');
+  }
+
+  async handleFileChange(e) {
+    const file = e.detail.value;
+    const token = ++this._inspectToken;
+    this.imageInfo = null;
+
+    if (!file) {
+      return;
+    }
+
+    let info;
+    try {
+      info = await readImageFile(file);
+    } catch (error) {
+      if (token !== this._inspectToken) return;
+      const message = error.code === 'EMPTY_FILE'
+        ? this.translations.image_empty_file
+        : this.translations.image_invalid_file;
+      this.rejectFile(message);
+      return;
+    }
+
+    if (token !== this._inspectToken) return;
+
+    const { valid, errors } = validateImageFile(info, {
+      maxFileSize: this.maxFileSize,
+      minWidth: this.minWidth,
+      maxWidth: this.maxWidth,
+      minHeight: this.minHeight,
+      maxHeight: this.maxHeight,
+    });
+
+    if (!valid) {
+      this.rejectFile(buildValidationMessages(errors, this.translations).join('. '));
+      return;
+    }
+
+    this.imageInfo = {
+      width: info.width,
+      height: info.height,
+      size: info.size,
+      thumbnail: createThumbnail(info.bitmap),
+    };
+  }
+
+  rejectFile(message) {
+    this.dropFileEl.errored = true;
+    this.dropFileEl.message = message;
+    this.dropFileEl.clear();
+  }
 }

package/lib/i18n/en.js

@@ -52,6 +52,20 @@ export const translations = {
   select_file: "Select file",
   selected_file: "Selected file",
   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",
+  image_file_too_large: (maxSizeLabel) => `The image exceeds the maximum allowed size (${maxSizeLabel})`,
+  image_width_error: (minWidth, maxWidth) => minWidth != null && maxWidth != null
+    ? `Image width must be between ${minWidth} and ${maxWidth}px`
+    : minWidth != null
+      ? `Image width must be at least ${minWidth}px`
+      : `Image width must be at most ${maxWidth}px`,
+  image_height_error: (minHeight, maxHeight) => minHeight != null && maxHeight != null
+    ? `Image height must be between ${minHeight} and ${maxHeight}px`
+    : minHeight != null
+      ? `Image height must be at least ${minHeight}px`
+      : `Image height must be at most ${maxHeight}px`,
+  image_dimensions_summary: (width, height, sizeLabel) => `${width} × ${height} px · ${sizeLabel}`,
   confirm_submit_title: "Confirm submission",
   confirm_submit_text: "Are you sure you want to submit this form?",
   add_relation_label: "Add",

package/lib/i18n/es.js

@@ -52,6 +52,20 @@ export const translations = {
   select_file: "Seleccionar archivo",
   selected_file: "Archivo seleccionado",
   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",
+  image_file_too_large: (maxSizeLabel) => `La imagen supera el tamaño máximo permitido (${maxSizeLabel})`,
+  image_width_error: (minWidth, maxWidth) => minWidth != null && maxWidth != null
+    ? `El ancho de la imagen debe estar entre ${minWidth} y ${maxWidth}px`
+    : minWidth != null
+      ? `El ancho de la imagen debe ser de al menos ${minWidth}px`
+      : `El ancho de la imagen debe ser como máximo de ${maxWidth}px`,
+  image_height_error: (minHeight, maxHeight) => minHeight != null && maxHeight != null
+    ? `El alto de la imagen debe estar entre ${minHeight} y ${maxHeight}px`
+    : minHeight != null
+      ? `El alto de la imagen debe ser de al menos ${minHeight}px`
+      : `El alto de la imagen debe ser como máximo de ${maxHeight}px`,
+  image_dimensions_summary: (width, height, sizeLabel) => `${width} × ${height} px · ${sizeLabel}`,
   confirm_submit_title: "Confirmar envío",
   confirm_submit_text: "¿Estás seguro de que deseas enviar este formulario?",
   add_relation_label: "Añadir",

package/lib/image/InvalidImageFileError.js

@@ -0,0 +1,7 @@
+export class InvalidImageFileError extends Error {
+  constructor(code, message) {
+    super(message);
+    this.name = 'InvalidImageFileError';
+    this.code = code;
+  }
+}

package/lib/image/buildValidationMessages.js

@@ -0,0 +1,16 @@
+import { formatFileSize } from './formatFileSize.js';
+
+export function buildValidationMessages(errors, translations) {
+  return errors.map(error => {
+    switch (error.code) {
+      case 'FILE_TOO_LARGE':
+        return translations.image_file_too_large(formatFileSize(error.maxFileSize));
+      case 'WIDTH_OUT_OF_RANGE':
+        return translations.image_width_error(error.minWidth, error.maxWidth);
+      case 'HEIGHT_OUT_OF_RANGE':
+        return translations.image_height_error(error.minHeight, error.maxHeight);
+      default:
+        return '';
+    }
+  });
+}

package/lib/image/buildValidationMessages.test.js

@@ -0,0 +1,41 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { buildValidationMessages } from './buildValidationMessages.js';
+
+const translations = {
+  image_file_too_large: (maxSizeLabel) => `Too large, max ${maxSizeLabel}`,
+  image_width_error: (min, max) => `Width must be between ${min} and ${max}`,
+  image_height_error: (min, max) => `Height must be between ${min} and ${max}`,
+};
+
+test('builds message for FILE_TOO_LARGE using formatted size', () => {
+  const messages = buildValidationMessages([{ code: 'FILE_TOO_LARGE', maxFileSize: 2048 }], translations);
+  assert.deepEqual(messages, ['Too large, max 2.0 KB']);
+});
+
+test('builds message for WIDTH_OUT_OF_RANGE', () => {
+  const messages = buildValidationMessages(
+    [{ code: 'WIDTH_OUT_OF_RANGE', minWidth: 200, maxWidth: 1000 }],
+    translations
+  );
+  assert.deepEqual(messages, ['Width must be between 200 and 1000']);
+});
+
+test('builds message for HEIGHT_OUT_OF_RANGE', () => {
+  const messages = buildValidationMessages(
+    [{ code: 'HEIGHT_OUT_OF_RANGE', minHeight: 200, maxHeight: 1000 }],
+    translations
+  );
+  assert.deepEqual(messages, ['Height must be between 200 and 1000']);
+});
+
+test('builds messages for multiple errors in order', () => {
+  const messages = buildValidationMessages(
+    [
+      { code: 'FILE_TOO_LARGE', maxFileSize: 1024 },
+      { code: 'WIDTH_OUT_OF_RANGE', minWidth: 100, maxWidth: 200 },
+    ],
+    translations
+  );
+  assert.equal(messages.length, 2);
+});

package/lib/image/createThumbnail.js

@@ -0,0 +1,13 @@
+export function createThumbnail(bitmap, maxSize = 120) {
+  const scale = Math.min(1, maxSize / Math.max(bitmap.width, bitmap.height));
+  const width = Math.round(bitmap.width * scale);
+  const height = Math.round(bitmap.height * scale);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext('2d');
+  context.drawImage(bitmap, 0, 0, width, height);
+
+  return canvas.toDataURL('image/png');
+}

package/lib/image/formatFileSize.js

@@ -0,0 +1,9 @@
+export function formatFileSize(bytes) {
+  if (bytes === 0) {
+    return '0 B';
+  }
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / Math.pow(1024, exponent);
+  return `${exponent === 0 ? value : value.toFixed(1)} ${units[exponent]}`;
+}

package/lib/image/formatFileSize.test.js

@@ -0,0 +1,23 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { formatFileSize } from './formatFileSize.js';
+
+test('formats 0 bytes', () => {
+  assert.equal(formatFileSize(0), '0 B');
+});
+
+test('formats bytes below 1 KB', () => {
+  assert.equal(formatFileSize(512), '512 B');
+});
+
+test('formats kilobytes', () => {
+  assert.equal(formatFileSize(2048), '2.0 KB');
+});
+
+test('formats megabytes', () => {
+  assert.equal(formatFileSize(2_411_724), '2.3 MB');
+});
+
+test('formats gigabytes', () => {
+  assert.equal(formatFileSize(1_610_612_736), '1.5 GB');
+});

package/lib/image/readImageFile.js

@@ -0,0 +1,23 @@
+import { InvalidImageFileError } from './InvalidImageFileError.js';
+
+export async function readImageFile(file) {
+  if (!file || file.size === 0) {
+    throw new InvalidImageFileError('EMPTY_FILE', 'The file is empty');
+  }
+
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(file);
+  } catch (error) {
+    throw new InvalidImageFileError('DECODE_ERROR', 'The file could not be read as a valid image');
+  }
+
+  return {
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    width: bitmap.width,
+    height: bitmap.height,
+    bitmap,
+  };
+}

package/lib/image/validateImageFile.js

@@ -0,0 +1,18 @@
+export function validateImageFile(info, constraints = {}) {
+  const { maxFileSize, minWidth, maxWidth, minHeight, maxHeight } = constraints;
+  const errors = [];
+
+  if (maxFileSize != null && info.size > maxFileSize) {
+    errors.push({ code: 'FILE_TOO_LARGE', maxFileSize, actual: info.size });
+  }
+
+  if ((minWidth != null && info.width < minWidth) || (maxWidth != null && info.width > maxWidth)) {
+    errors.push({ code: 'WIDTH_OUT_OF_RANGE', minWidth, maxWidth, actual: info.width });
+  }
+
+  if ((minHeight != null && info.height < minHeight) || (maxHeight != null && info.height > maxHeight)) {
+    errors.push({ code: 'HEIGHT_OUT_OF_RANGE', minHeight, maxHeight, actual: info.height });
+  }
+
+  return { valid: errors.length === 0, errors };
+}

package/lib/image/validateImageFile.test.js

@@ -0,0 +1,54 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { validateImageFile } from './validateImageFile.js';
+
+const baseInfo = { size: 1000, width: 800, height: 600 };
+
+test('valid when no constraints are set', () => {
+  const result = validateImageFile(baseInfo, {});
+  assert.equal(result.valid, true);
+  assert.deepEqual(result.errors, []);
+});
+
+test('rejects files over maxFileSize', () => {
+  const result = validateImageFile(baseInfo, { maxFileSize: 500 });
+  assert.equal(result.valid, false);
+  assert.equal(result.errors[0].code, 'FILE_TOO_LARGE');
+  assert.equal(result.errors[0].maxFileSize, 500);
+  assert.equal(result.errors[0].actual, 1000);
+});
+
+test('rejects width below minWidth', () => {
+  const result = validateImageFile(baseInfo, { minWidth: 1000 });
+  assert.equal(result.valid, false);
+  assert.equal(result.errors[0].code, 'WIDTH_OUT_OF_RANGE');
+});
+
+test('rejects width above maxWidth', () => {
+  const result = validateImageFile(baseInfo, { maxWidth: 400 });
+  assert.equal(result.valid, false);
+  assert.equal(result.errors[0].code, 'WIDTH_OUT_OF_RANGE');
+});
+
+test('rejects height out of range', () => {
+  const result = validateImageFile(baseInfo, { minHeight: 700, maxHeight: 900 });
+  assert.equal(result.valid, false);
+  assert.equal(result.errors[0].code, 'HEIGHT_OUT_OF_RANGE');
+});
+
+test('accumulates multiple errors', () => {
+  const result = validateImageFile(baseInfo, { maxFileSize: 10, maxWidth: 10, maxHeight: 10 });
+  assert.equal(result.valid, false);
+  assert.equal(result.errors.length, 3);
+});
+
+test('passes when dimensions and size are within range', () => {
+  const result = validateImageFile(baseInfo, {
+    maxFileSize: 2000,
+    minWidth: 200,
+    maxWidth: 1000,
+    minHeight: 200,
+    maxHeight: 1000,
+  });
+  assert.equal(result.valid, true);
+});

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@dile/crud",
-  "version": "1.14.6",
+  "version": "1.14.8",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -24,12 +25,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^2.26.0",
+    "@dile/ui": "^2.27.0",
     "axios": "^1.16.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "90ebde5b908aab4093afeee3bda87ef3ad85904e"
+  "gitHead": "5c04395f81c01fd289869b1b99d427d482c516a5"
 }