@mostajs/schema-form 0.2.0 → 0.3.0

package/llms.txt

@@ -42,6 +42,18 @@ Repeater côté navigateur : câbler add (clone d'un `.sf-item`, réindexer `nam
 ## STATUTS (exemple QatraxFlow)
 `resultat.statut` = Validé / Non validé / En cours / Interrompu (voir `examples/qatraxflow-recette.schema.js`).
 
+## LE CHAMP FICHIER (0.3.0)
+`{ path, type: 'fichier', accept?, capture?, multiple? }`
+
+- ⚠️ **L'`enctype="multipart/form-data"` est posé AUTOMATIQUEMENT** dès qu'un champ `fichier`
+  figure au schéma — répéteurs compris. Sans lui, le navigateur envoie le seul NOM du fichier,
+  jamais ses octets : il ne se plaint pas, le serveur reçoit un champ texte, et la photo n'arrive
+  jamais. C'est l'oubli le plus fréquent des formulaires de téléversement, et il est SILENCIEUX.
+- ⚠️ **La valeur n'est jamais pré-remplie** : un navigateur refuse qu'une page choisisse un fichier
+  (ce serait une exfiltration). Un écran de modification montre la pièce déjà envoyée À CÔTÉ.
+- ⚠️ `capture="environment"` ouvre l'**appareil photo** sur mobile, pas la galerie.
+- ⚠️ Les OCTETS ne passent pas par `readValues` : ils se lisent avec `@mostajs/form-data-extract`.
+
 ## PIÈGES
 - **Zéro-dép, HTML-string** : `renderForm` rend une chaîne ; côté React, injecter ou porter en composants.
 - `readValues` : Array traité comme liste [name,value] (pas via `.entries()`), FormData via `.entries()`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostajs/schema-form",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Interface de SAISIE générique pilotée par schéma (zéro-dép) : sections + champs typés (text/textarea/number/boolean/select/color/date/localized/repeater), chemins imbriqués, multilingue AR/FR/EN. Rendu HTML (renderForm) + relecture (readValues). Réutilisable par toute app @mostajs.",
   "author": "Dr Hamid MADANI <drmdh@msn.com>",
   "license": "AGPL-3.0-or-later",

package/src/index.js

@@ -49,6 +49,20 @@ function renderControl(f, value, name) {
       return `<input type="number" name="${name}"${req}${ph} value="${escapeHtml(value ?? '')}"${f.min != null ? ` min="${f.min}"` : ''}${f.max != null ? ` max="${f.max}"` : ''}${f.step != null ? ` step="${f.step}"` : ''} style="${inputStyle}">`;
     case 'boolean':
       return `<label style="display:inline-flex;gap:.4rem;align-items:center"><input type="checkbox" name="${name}" value="true"${value ? ' checked' : ''}> ${escapeHtml(label(f.help) || 'Oui')}</label>`;
+    // ── LE CHAMP FICHIER (0.3.0) ──────────────────────────────────────────
+    //
+    // ⚠️ `capture` ouvre l'APPAREIL PHOTO sur mobile, au lieu de la galerie. C'est ce qu'on veut
+    // pour photographier une facture au comptoir : demander à un exploitant de prendre la photo,
+    // de la retrouver dans sa galerie, puis de la choisir, c'est trois occasions d'abandonner.
+    //
+    // ⚠️ La valeur d'un champ fichier n'est JAMAIS pré-remplie : un navigateur refuse qu'une page
+    // décide quel fichier est sélectionné (ce serait une exfiltration). Un formulaire de
+    // modification doit donc afficher la pièce DÉJÀ envoyée à côté du champ, pas dedans.
+    case 'fichier':
+      return `<input type="file" name="${name}"${req}`
+        + `${f.accept ? ` accept="${escapeHtml(f.accept)}"` : ''}`
+        + `${f.capture ? ` capture="${escapeHtml(f.capture)}"` : ''}`
+        + `${f.multiple ? ' multiple' : ''} style="${inputStyle}">`;
     case 'select':
       return `<select name="${name}"${req} style="${inputStyle}">${(f.options || []).map((o) => `<option value="${escapeHtml(o.value)}"${String(value) === String(o.value) ? ' selected' : ''}>${escapeHtml(label(o.label ?? o.value))}</option>`).join('')}</select>`;
     case 'montant': {
@@ -150,7 +164,17 @@ export function renderForm(schema, values = {}, opts = {}) {
       <legend style="padding:0 .5rem;font-weight:700;color:${SF_THEME.blue}">${escapeHtml(label(sec.label, locale) || sec.id)}</legend>${inner}</fieldset>`;
   }).join('');
   const submit = opts.submitLabel === null ? '' : `<button type="submit" style="background:${SF_THEME.blue};color:#fff;border:0;border-radius:.45rem;padding:.6rem 1.2rem;font-weight:600;cursor:pointer">${escapeHtml(opts.submitLabel || 'Enregistrer')}</button>`;
-  return `<form class="sf-form"${opts.id ? ` id="${opts.id}"` : ''}${opts.action ? ` method="post" action="${opts.action}"` : ''}>
+  // ── L'ENCTYPE EST POSÉ TOUT SEUL, ET C'EST LE POINT ───────────────────────
+  //
+  // ⚠️ Un formulaire qui porte un `<input type=file>` SANS `enctype="multipart/form-data"` envoie
+  // le seul NOM du fichier, jamais ses octets. Le navigateur ne se plaint pas, le serveur reçoit
+  // un champ texte qui ressemble à un fichier, et la photo n'arrive jamais. C'est l'oubli le plus
+  // fréquent des formulaires de téléversement, et il est parfaitement silencieux.
+  //
+  // On ne le laisse donc pas à la charge de l'appelant : dès qu'un champ `fichier` figure au
+  // schéma — y compris DANS un répéteur — l'attribut est posé.
+  const aUnFichier = JSON.stringify(schema).includes('"fichier"');
+  return `<form class="sf-form"${opts.id ? ` id="${opts.id}"` : ''}${opts.action ? ` method="post" action="${opts.action}"` : ''}${aUnFichier ? ' enctype="multipart/form-data"' : ''}>
     ${schema.title ? `<h2 style="color:${SF_THEME.ink}">${escapeHtml(label(schema.title, locale))}</h2>` : ''}${body}${submit}</form>`;
 }