webspresso 0.0.79 → 0.0.80

package/README.md

@@ -2137,7 +2137,7 @@ List query parameters: `page`, `perPage`, `sort`, `order`, `include`, `trashed`
 
 ### File upload plugin
 
-Registers **POST** `multipart/form-data` (field name **`file`** by default) and stores the file via a pluggable provider. The framework ships with **`createLocalFileProvider({ destDir, publicBasePath })`** (writes to disk and returns a public URL path). Use **`mimeAllowlist`** / **`extensionAllowlist`** and **`maxBytes`** (default **10 MiB**) on the server; production apps should prefer an explicit MIME allowlist.
+Registers **POST** `multipart/form-data` (field name **`file`** by default) and stores the file(s) via a pluggable provider. The framework ships with **`createLocalFileProvider({ destDir, publicBasePath })`** (writes to disk and returns public URL paths). Use **`mimeAllowlist`** / **`extensionAllowlist`**, **`maxBytes`** (default **10 MiB**), **`multiple`** (default **`false`**), and **`maxFiles`** (default **10**) on the server; production apps should prefer an explicit MIME allowlist.
 
 **Setup:**
 
@@ -2160,6 +2160,8 @@ const { app } = createApp({
       extensionAllowlist: ['jpg', 'jpeg', 'png', 'pdf'],
       middleware: [], // optional Express handlers (e.g. session auth)
       fieldName: 'file',
+      multiple: false, // set to true to allow multiple file uploads in a single request
+      maxFiles: 10,     // max number of files to accept when multiple is true
     }),
     adminPanelPlugin({
       db,
@@ -2169,13 +2171,14 @@ const { app } = createApp({
 });
 ```
 
-- **ORM:** `zdb.file({ maxLength: 2048, nullable: true })` — string column for the stored public URL or path; migrations use `table.string(..., maxLength)`.
-- **Admin forms:** columns with `zdb.file()` automatically render a drag-and-drop upload widget (or a manual URL text field when `uploadUrl` is not configured). Image URLs show an inline thumbnail preview; use `ui.accept: 'image/*'` for image-only fields. Optional `ui: { label, hint, accept, maxBytes }` on the column customizes the widget. For existing `zdb.string()` columns you can use `admin.customFields: { columnName: { type: 'file-upload' } }` instead of changing the schema type.
-- **Admin:** the panel reads **`settings.uploadUrl`** from the registry (set automatically when `uploadPlugin` is registered **before** `adminPanelPlugin`, or pass **`adminPanelPlugin({ uploadUrl: '/api/upload' })`**). File fields (`type: 'file'` or `customFields` type `file-upload`) POST to that URL with credentials; the saved record stores the returned **`url`** / **`publicUrl`** string.
-- **Response:** `{ url, publicUrl, key? }` — clients typically persist **`url`** / **`publicUrl`** in the model.
+- **ORM (Single File):** `zdb.file({ maxLength: 2048, nullable: true })` — string column for the stored public URL or path; migrations use `table.string(..., maxLength)`.
+- **ORM (Multiple Files):** `zdb.files({ nullable: true })` — array column that stores a list of file URLs/paths as a JSON field in the database; migrations use `table.json()`.
+- **Admin forms:** columns with `zdb.file()` or `zdb.files()` automatically render a drag-and-drop upload widget (or a manual URL text field when `uploadUrl` is not configured). Multiple file upload fields (`zdb.files()`) allow adding and removing multiple files concurrently and show preview grids. Image URLs show an inline thumbnail preview; use `ui.accept: 'image/*'` for image-only fields. Optional `ui: { label, hint, accept, maxBytes }` on the column customizes the widget. For existing `zdb.string()` columns you can use `admin.customFields: { columnName: { type: 'file-upload' } }` instead of changing the schema type.
+- **Admin:** the panel reads **`settings.uploadUrl`** from the registry (set automatically when `uploadPlugin` is registered **before** `adminPanelPlugin`, or pass **`adminPanelPlugin({ uploadUrl: '/api/upload' })`**). File fields (`type: 'file'`, `'files'` or `customFields` type `file-upload`) POST to that URL with credentials; the saved record stores the returned **`url`** / **`publicUrl`** string (or an array of URLs for `'files'`).
+- **Response:** Single: `{ url, publicUrl, key? }`. Multiple: `[{ url, publicUrl, key? }, ...]`.
 - **Custom storage:** `uploadPlugin({ provider: { async put({ buffer, originalName, mimeType, size, req }) { return { publicUrl: '...' }; } } })`.
 
-**Admin model example** (`zdb.file()` picks up the upload widget from schema; no extra `customFields` needed):
+**Admin model example** (`zdb.file()` and `zdb.files()` pick up the upload widgets from schema; no extra `customFields` needed):
 
 ```javascript
 const { defineModel, zdb } = require('webspresso');
@@ -2191,6 +2194,10 @@ const Post = defineModel({
       nullable: true,
       ui: { label: 'Cover', accept: 'image/*', hint: 'JPEG or PNG' },
     }),
+    gallery: zdb.files({
+      nullable: true,
+      ui: { label: 'Gallery Images', accept: 'image/*' },
+    }),
   }),
   admin: { enabled: true, label: 'Posts' },
 });

package/core/orm/json-fields.js

@@ -12,7 +12,7 @@ function getJsonColumns(model) {
   const jsonCols = new Set();
   if (model.columns) {
     for (const [name, meta] of model.columns) {
-      if (meta.type === 'json') {
+      if (meta.type === 'json' || meta.type === 'array' || meta.type === 'files') {
         jsonCols.add(name);
       }
     }

package/core/orm/migrations/scaffold.js

@@ -153,6 +153,11 @@ function generateColumnLine(columnName, meta) {
       parts.push(`table.json('${columnName}')`);
       break;
 
+    case 'files':
+      // Multiple files are stored as JSON in database
+      parts.push(`table.json('${columnName}')`);
+      break;
+
     case 'enum':
       const enumValues = meta.enumValues || [];
       const valuesStr = enumValues.map(v => `'${v}'`).join(', ');

package/core/orm/schema-helpers.js

@@ -439,6 +439,24 @@ function createSchemaHelpers(z) {
       }, z);
     },
 
+    /**
+     * Multiple Files / URLs column (stored as JSON array in database)
+     * @param {Partial<import('./types').ColumnMeta>} [options={}]
+     * @returns {SchemaBuilder}
+     */
+    files(options = {}) {
+      const { nullable = false, ...rest } = options;
+      let schema = z.array(z.string());
+      if (nullable) {
+        schema = schema.nullable().optional();
+      }
+      return createSchemaBuilder(schema, {
+        type: 'files',
+        nullable,
+        ...rest,
+      }, z);
+    },
+
     /**
      * Integer column
      * @param {Partial<import('./types').ColumnMeta>} [options={}]

package/core/orm/types.js

@@ -9,7 +9,7 @@
 // ============================================================================
 
 /**
- * @typedef {'id'|'string'|'text'|'file'|'integer'|'bigint'|'float'|'decimal'|'boolean'|'date'|'datetime'|'timestamp'|'json'|'array'|'enum'|'uuid'|'nanoid'} ColumnType
+ * @typedef {'id'|'string'|'text'|'file'|'files'|'integer'|'bigint'|'float'|'decimal'|'boolean'|'date'|'datetime'|'timestamp'|'json'|'array'|'enum'|'uuid'|'nanoid'} ColumnType
  */
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webspresso",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "description": "Minimal, production-ready SSR framework for Node.js with file-based routing, Nunjucks templating, built-in i18n, and CLI tooling",
   "main": "index.js",
   "types": "index.d.ts",

package/plugins/admin-panel/client/parts/07-model-list.js

@@ -128,6 +128,24 @@ function formatCellValue(value, col, record = null) {
       }
       return short || m('span.text-gray-400', '—');
     }
+
+    case 'files': {
+      if (Array.isArray(value)) {
+        return value.length > 0
+          ? m('div.flex.gap-1.items-center', [
+              m('span.text-xs.bg-gray-100.dark:bg-slate-800.px-2.py-1.rounded.mr-1', `${value.length} files`),
+              ...value.slice(0, 2).map(s => {
+                const isImg = /\.(jpe?g|png|gif|webp|svg|avif|bmp|ico)(\?|#|$)/i.test(s);
+                if (isImg) {
+                  return m('img.h-6.w-6.rounded.object-cover.border.border-gray-200.dark:border-slate-700.bg-white', { src: s });
+                }
+                return m('a.text-xs.text-indigo-600.dark:text-indigo-400.hover:underline', { href: s, target: '_blank' }, '📄');
+              })
+            ])
+          : m('span.text-gray-400.dark:text-slate-500.italic', 'empty');
+      }
+      return String(value);
+    }
     
     default: {
       const str = String(value);

package/plugins/admin-panel/field-renderers/file-upload.js

@@ -219,6 +219,166 @@ module.exports = {
       ]);
     },
   },
+
+  FilesUploadField: {
+    oninit: (vnode) => {
+      vnode.state.uploading = false;
+    },
+    oncreate: (vnode) => {
+      const { name, meta = {} } = vnode.attrs;
+      if (!getUploadUrlFromAdminConfig()) return;
+
+      const dropZoneId = 'drop-zone-multiple-' + name;
+      const dropZone = document.getElementById(dropZoneId);
+      if (!dropZone) return;
+
+      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+        dropZone.addEventListener(eventName, (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        });
+      });
+
+      ['dragenter', 'dragover'].forEach((eventName) => {
+        dropZone.addEventListener(eventName, () => {
+          dropZone.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-slate-800');
+        });
+      });
+
+      ['dragleave', 'drop'].forEach((eventName) => {
+        dropZone.addEventListener(eventName, () => {
+          dropZone.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-slate-800');
+        });
+      });
+
+      dropZone.addEventListener('drop', (e) => {
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+          handleMultipleFilesUpload(files, vnode, meta);
+        }
+      });
+
+      const fileInput = dropZone.querySelector('input[type=file]');
+      if (fileInput) {
+        fileInput.addEventListener('change', (e) => {
+          if (e.target.files.length > 0) {
+            handleMultipleFilesUpload(e.target.files, vnode, meta);
+          }
+        });
+      }
+    },
+    view: (vnode) => {
+      const { name, value = [], meta = {}, required = false, readonly = false } = vnode.attrs;
+      const state = vnode.state;
+      const dropZoneId = 'drop-zone-multiple-' + name;
+      const maxSize = meta.maxSize || meta.maxBytes || 10 * 1024 * 1024;
+      const accept = meta.accept || '*/*';
+      const uploadUrl = getUploadUrlFromAdminConfig();
+      const label = meta.label || name;
+
+      const urls = Array.isArray(value) ? value : (value ? [value] : []);
+
+      if (!uploadUrl) {
+        return m('.mb-4', [
+          m(
+            'label.block.text-sm.font-medium.mb-2',
+            label,
+            required ? m('span.text-red-500', ' *') : null
+          ),
+          m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured.'),
+        ]);
+      }
+
+      return m('.mb-4', [
+        m(
+          'label.block.text-sm.font-medium.mb-2',
+          label,
+          required ? m('span.text-red-500', ' *') : null
+        ),
+
+        urls.length > 0
+          ? m('.grid.grid-cols-2.sm:grid-cols-3.md:grid-cols-4.gap-4.mb-3', urls.map((url, idx) => {
+              return m('.relative.group.border.border-gray-200.dark:border-slate-700.rounded-lg.p-2.bg-gray-50.dark:bg-slate-900', [
+                shouldShowImagePreview(url, accept)
+                  ? m('a.block', { href: url, target: '_blank', rel: 'noopener noreferrer' },
+                      m('img.h-32.w-full.rounded.object-contain.bg-white.dark:bg-slate-950', {
+                        src: url,
+                        alt: `${label} ${idx + 1}`,
+                        loading: 'lazy',
+                      })
+                    )
+                  : m('a.flex.items-center.justify-center.h-32.w-full.text-sm.text-indigo-600.dark:text-indigo-400.break-all.p-2', {
+                      href: url,
+                      target: '_blank',
+                      rel: 'noopener noreferrer',
+                    }, url.substring(url.lastIndexOf('/') + 1) || url),
+                !readonly
+                  ? m('button.absolute.top-1.right-1.bg-red-500.text-white.rounded-full.p-1.shadow-md.opacity-0.group-hover:opacity-100.hover:bg-red-700.transition-opacity', {
+                      type: 'button',
+                      onclick: () => {
+                        const newUrls = urls.filter((_, i) => i !== idx);
+                        if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
+                      },
+                      title: 'Remove file',
+                    }, [
+                      m('svg.w-4.h-4', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
+                        m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M6 18L18 6M6 6l12 12' })
+                      )
+                    ])
+                  : null,
+              ]);
+            }))
+          : null,
+
+        m(
+          'div.border-2.border-dashed.border-gray-300.dark:border-slate-600.rounded.p-6.text-center',
+          {
+            id: dropZoneId,
+            style: readonly || state.uploading ? undefined : 'cursor: pointer;',
+          },
+          [
+            m('input[type=file]', {
+              class: 'hidden',
+              id: 'file-input-multiple-' + name,
+              accept,
+              multiple: true,
+              disabled: readonly || state.uploading,
+              onchange: (e) => {
+                if (e.target.files.length > 0) {
+                  handleMultipleFilesUpload(e.target.files, vnode, meta);
+                }
+              },
+            }),
+            readonly
+              ? null
+              : m('div', [
+                  state.uploading
+                    ? m('p.text-blue-600.dark:text-blue-400.animate-pulse', 'Uploading files...')
+                    : m('div', [
+                        m(
+                          'p.text-gray-600.dark:text-slate-400.mb-2',
+                          'Drag and drop files here, or'
+                        ),
+                        m(
+                          'label.text-blue-600.hover:text-blue-800.cursor-pointer',
+                          { for: 'file-input-multiple-' + name },
+                          'browse'
+                        ),
+                      ]),
+                ]),
+          ]
+        ),
+        m('input[type=hidden]', {
+          name,
+          value: JSON.stringify(urls),
+        }),
+        m(
+          'p.text-xs.text-gray-500.mt-1',
+          'Max ' + Math.round(maxSize / 1024 / 1024) + ' MB per file (server enforces limits)'
+        ),
+      ]);
+    },
+  },
 };
 
 /**
@@ -272,3 +432,66 @@ async function handleFileUpload(file, vnode, meta) {
     alert(err.message || 'Upload failed');
   }
 }
+
+/**
+ * @param {FileList} files
+ * @param {import('mithril').Vnode} vnode
+ * @param {Object} meta
+ */
+async function handleMultipleFilesUpload(files, vnode, meta) {
+  const maxSize = meta.maxSize || meta.maxBytes || 10 * 1024 * 1024;
+  const uploadUrl = getUploadUrlFromAdminConfig();
+  if (!uploadUrl) {
+    alert('Upload URL is not configured.');
+    return;
+  }
+
+  const currentUrls = Array.isArray(vnode.attrs.value)
+    ? [...vnode.attrs.value]
+    : (vnode.attrs.value ? [vnode.attrs.value] : []);
+
+  vnode.state.uploading = true;
+  if (typeof m !== 'undefined' && m.redraw) m.redraw();
+
+  const uploadPromises = Array.from(files).map(async (file) => {
+    if (file.size > maxSize) {
+      alert(`File ${file.name} is too large (max ${Math.round(maxSize / 1024 / 1024)} MB) and was skipped.`);
+      return null;
+    }
+
+    const fd = new FormData();
+    fd.append('file', file);
+
+    try {
+      const res = await fetch(uploadUrl, { method: 'POST', body: fd, credentials: 'include' });
+      let data = {};
+      try {
+        data = await res.json();
+      } catch {
+        data = {};
+      }
+      if (!res.ok) {
+        alert(`Upload failed for ${file.name}: ${data.message || data.error || res.status}`);
+        return null;
+      }
+      return data.url || data.publicUrl || '';
+    } catch (err) {
+      alert(`Upload failed for ${file.name}: ${err.message}`);
+      return null;
+    }
+  });
+
+  try {
+    const results = await Promise.all(uploadPromises);
+    const newUrls = results.filter(Boolean);
+    if (newUrls.length > 0) {
+      const updatedUrls = [...currentUrls, ...newUrls];
+      if (vnode.attrs.onchange) {
+        vnode.attrs.onchange(updatedUrls);
+      }
+    }
+  } finally {
+    vnode.state.uploading = false;
+    if (typeof m !== 'undefined' && m.redraw) m.redraw();
+  }
+}

package/plugins/admin-panel/field-renderers/index.js

@@ -79,6 +79,7 @@ function initializeDefaultRenderers() {
   registerFieldRenderer('rich-text', richTextRenderer.RichTextField);
   registerFieldRenderer('file-upload', fileUploadRenderer.FileUploadField);
   registerFieldRenderer('file', fileUploadRenderer.FileUploadField);
+  registerFieldRenderer('files', fileUploadRenderer.FilesUploadField);
   
   // Relation types
   registerFieldRenderer('belongsTo', relationRenderers.BelongsToField);

package/plugins/upload/index.js

@@ -54,12 +54,12 @@ function extensionFromName(name) {
  * @param {string} fieldName
  * @returns {import('express').RequestHandler}
  */
-function createMulterSingleMiddleware(maxBytes, fieldName) {
+function createMulterMiddleware(maxBytes, fieldName, multiple, maxFiles) {
   const upload = multer({
     storage: multer.memoryStorage(),
-    limits: { fileSize: maxBytes, files: 1 },
+    limits: { fileSize: maxBytes, files: multiple ? maxFiles : 1 },
   });
-  return upload.single(fieldName);
+  return multiple ? upload.array(fieldName, maxFiles) : upload.single(fieldName);
 }
 
 /**
@@ -91,6 +91,8 @@ function multerErrorResponse(err) {
  * @param {string[]|null} [options.extensionAllowlist] — Optional extra guard on original extension
  * @param {import('express').RequestHandler|import('express').RequestHandler[]} [options.middleware]
  * @param {string} [options.fieldName='file'] — Multipart field name
+ * @param {boolean} [options.multiple=false] — Allow multiple file uploads
+ * @param {number} [options.maxFiles=10] — Max files to allow when multiple is true
  * @returns {Object} Webspresso plugin
  */
 function uploadPlugin(options = {}) {
@@ -103,6 +105,8 @@ function uploadPlugin(options = {}) {
     extensionAllowlist = null,
     middleware = [],
     fieldName = 'file',
+    multiple = false,
+    maxFiles = 10,
   } = options;
 
   const normalizedPath = normalizeRoutePath(routePath);
@@ -115,7 +119,7 @@ function uploadPlugin(options = {}) {
     });
 
   const mw = (Array.isArray(middleware) ? middleware : [middleware]).filter(Boolean);
-  const parseMultipart = createMulterSingleMiddleware(maxBytes, fieldName);
+  const parseMultipart = createMulterMiddleware(maxBytes, fieldName, multiple, maxFiles);
 
   return {
     name: 'upload',
@@ -133,39 +137,58 @@ function uploadPlugin(options = {}) {
             return res.status(status).json({ error: message, message });
           }
 
-          const file = req.file;
-          if (!file || !file.buffer) {
+          const files = multiple ? (req.files || []) : (req.file ? [req.file] : []);
+          if (files.length === 0) {
             return res.status(400).json({ error: 'No file uploaded', message: 'No file uploaded' });
           }
 
-          const mime = file.mimetype || 'application/octet-stream';
-          const originalName = file.originalname || 'upload';
-          const ext = extensionFromName(originalName);
-
-          if (mimeAllowlist && mimeAllowlist.length && !mimeAllowlist.includes(mime)) {
-            return res.status(415).json({ error: 'MIME type not allowed', message: 'MIME type not allowed' });
-          }
-          if (
-            extensionAllowlist &&
-            extensionAllowlist.length &&
-            (!ext || !extensionAllowlist.includes(ext))
-          ) {
-            return res.status(400).json({ error: 'File extension not allowed', message: 'File extension not allowed' });
+          // Validate all files first
+          for (const file of files) {
+            if (!file || !file.buffer) {
+              return res.status(400).json({ error: 'No file uploaded', message: 'No file uploaded' });
+            }
+
+            const mime = file.mimetype || 'application/octet-stream';
+            const originalName = file.originalname || 'upload';
+            const ext = extensionFromName(originalName);
+
+            if (mimeAllowlist && mimeAllowlist.length && !mimeAllowlist.includes(mime)) {
+              return res.status(415).json({ error: 'MIME type not allowed', message: 'MIME type not allowed' });
+            }
+            if (
+              extensionAllowlist &&
+              extensionAllowlist.length &&
+              (!ext || !extensionAllowlist.includes(ext))
+            ) {
+              return res.status(400).json({ error: 'File extension not allowed', message: 'File extension not allowed' });
+            }
           }
 
           try {
-            const result = await provider.put({
-              buffer: file.buffer,
-              originalName,
-              mimeType: mime,
-              size: file.size,
-              req,
-            });
-            res.json({
-              url: result.publicUrl,
-              publicUrl: result.publicUrl,
-              key: result.key,
+            const uploadPromises = files.map(async (file) => {
+              const mime = file.mimetype || 'application/octet-stream';
+              const originalName = file.originalname || 'upload';
+              const result = await provider.put({
+                buffer: file.buffer,
+                originalName,
+                mimeType: mime,
+                size: file.size,
+                req,
+              });
+              return {
+                url: result.publicUrl,
+                publicUrl: result.publicUrl,
+                key: result.key,
+              };
             });
+
+            const results = await Promise.all(uploadPromises);
+
+            if (multiple) {
+              res.json(results);
+            } else {
+              res.json(results[0]);
+            }
           } catch (e) {
             const message = e instanceof Error ? e.message : String(e);
             res.status(500).json({ error: message, message });