webspresso 0.0.78 → 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.78",
+  "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/04-field-renderers.js

@@ -1,4 +1,160 @@
 // Field Renderers - render appropriate input based on column type
+
+// BelongsTo relation dropdown select component
+const BelongsToField = {
+  oninit: (vnode) => {
+    const { col } = vnode.attrs;
+    const customField = col.customField || {};
+    const relationName = customField.relation || col.name.replace(/_id$/, '');
+    const modelName = m.route.param('model');
+    vnode.state.loading = true;
+    vnode.state.options = [];
+    
+    api.get('/models/' + modelName + '/relations/' + relationName)
+      .then(result => {
+        vnode.state.options = result.data || [];
+      })
+      .catch(err => {
+        console.error('Failed to load relation data:', err);
+      })
+      .finally(() => {
+        vnode.state.loading = false;
+        m.redraw();
+      });
+  },
+  view: (vnode) => {
+    const { col, value, onChange, readonly } = vnode.attrs;
+    const customField = col.customField || {};
+    const label = col.ui?.label || formatColumnLabel(col.name);
+    const hint = col.ui?.hint || '';
+    const valueKey = customField.valueKey || 'id';
+    const displayKey = customField.displayKey || 
+      (vnode.state.options.length > 0 ? ['name', 'title', 'label', 'username', 'email'].find(k => k in vnode.state.options[0]) : null) || 
+      'id';
+    
+    if (vnode.state.loading) {
+      return m('.mb-4', [
+        m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', label),
+        m('.text-xs.text-gray-500.dark:text-slate-400', 'Loading options...')
+      ]);
+    }
+    
+    return m('.mb-4', [
+      m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', { for: col.name }, [
+        label,
+        !col.nullable && !readonly ? m('span.text-red-500', ' *') : null
+      ]),
+      m('select.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
+        id: col.name,
+        name: col.name,
+        value: value !== null && value !== undefined ? String(value) : '',
+        disabled: readonly,
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
+        onchange: (e) => {
+          const selectedValue = e.target.value === '' ? null : e.target.value;
+          const typedValue = (col.type === 'integer' || col.type === 'bigint' || col.type === 'float' || col.type === 'decimal') && selectedValue !== null
+            ? Number(selectedValue)
+            : selectedValue;
+          onChange(typedValue);
+        },
+      }, [
+        col.nullable ? m('option', { value: '' }, '-- Select --') : m('option', { value: '' }, '-- Select --'),
+        vnode.state.options.map(item => {
+          const itemValue = item[valueKey];
+          const itemDisplay = item[displayKey] || String(itemValue);
+          return m('option', {
+            value: String(itemValue),
+            selected: value !== null && value !== undefined && String(value) === String(itemValue)
+          }, itemDisplay);
+        }),
+      ]),
+      hint ? m('p.text-xs.text-gray-500.dark:text-slate-400.mt-1', hint) : null,
+    ]);
+  }
+};
+
+// HasMany relation multi-select checkbox component
+const HasManyField = {
+  oninit: (vnode) => {
+    const { col } = vnode.attrs;
+    const customField = col.customField || {};
+    const relationName = customField.relation || col.name.replace(/_ids$/, '').replace(/_id$/, '');
+    const modelName = m.route.param('model');
+    vnode.state.loading = true;
+    vnode.state.options = [];
+    
+    api.get('/models/' + modelName + '/relations/' + relationName)
+      .then(result => {
+        vnode.state.options = result.data || [];
+      })
+      .catch(err => {
+        console.error('Failed to load relation data:', err);
+      })
+      .finally(() => {
+        vnode.state.loading = false;
+        m.redraw();
+      });
+  },
+  view: (vnode) => {
+    const { col, value = [], onChange, readonly } = vnode.attrs;
+    const customField = col.customField || {};
+    const label = col.ui?.label || formatColumnLabel(col.name);
+    const hint = col.ui?.hint || '';
+    const valueKey = customField.valueKey || 'id';
+    const displayKey = customField.displayKey || 
+      (vnode.state.options.length > 0 ? ['name', 'title', 'label', 'username', 'email'].find(k => k in vnode.state.options[0]) : null) || 
+      'id';
+    const selectedIds = Array.isArray(value) ? value.map(v => String(v)) : [];
+    
+    if (vnode.state.loading) {
+      return m('.mb-4', [
+        m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', label),
+        m('.text-xs.text-gray-500.dark:text-slate-400', 'Loading options...')
+      ]);
+    }
+    
+    return m('.mb-4', [
+      m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', [
+        label,
+        !col.nullable && !readonly ? m('span.text-red-500', ' *') : null
+      ]),
+      m('.border.border-gray-300.dark:border-slate-600.rounded-md.p-3.max-h-48.overflow-y-auto.bg-white.dark:bg-slate-900/70', [
+        vnode.state.options.map(item => {
+          const itemValue = String(item[valueKey]);
+          const itemDisplay = item[displayKey] || itemValue;
+          const isSelected = selectedIds.includes(itemValue);
+          
+          return m('label.flex.items-center.mb-2.cursor-pointer.text-sm.text-gray-700.dark:text-slate-300', [
+            m('input.mr-2.rounded.border-gray-300.dark:border-slate-600.text-indigo-600.focus:ring-indigo-500', {
+              type: 'checkbox',
+              checked: isSelected,
+              disabled: readonly,
+              onchange: (e) => {
+                let newSelected = [...selectedIds];
+                if (e.target.checked) {
+                  if (!newSelected.includes(itemValue)) {
+                    newSelected.push(itemValue);
+                  }
+                } else {
+                  newSelected = newSelected.filter(id => id !== itemValue);
+                }
+                
+                // Convert type if needed
+                const typedSelected = col.type === 'array' || typeof value[0] === 'string'
+                  ? newSelected
+                  : newSelected.map(Number);
+                onChange(typedSelected);
+              }
+            }),
+            m('span', itemDisplay),
+          ]);
+        }),
+      ]),
+      hint ? m('p.text-xs.text-gray-500.dark:text-slate-400.mt-1', hint) : null,
+    ]);
+  }
+};
+
 const FieldRenderers = {
   // Text input (string)
   string: (col, value, onChange, readonly) => {
@@ -284,4 +440,14 @@ const FieldRenderers = {
       hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
     ]);
   },
+
+  // belongsTo relation dropdown
+  belongsTo: (col, value, onChange, readonly) => {
+    return m(BelongsToField, { col, value, onChange, readonly });
+  },
+
+  // hasMany relation checklist
+  hasMany: (col, value, onChange, readonly) => {
+    return m(HasManyField, { col, value, onChange, readonly });
+  },
 };

package/plugins/admin-panel/client/parts/05-rich-text-file-helpers.js

@@ -372,7 +372,36 @@ function getFieldRenderer(col, modelMeta) {
         });
       };
     }
-    // Add other custom field types here if needed
+    if (col.customField.type === 'belongsTo') {
+      return FieldRenderers.belongsTo;
+    }
+    if (col.customField.type === 'hasMany') {
+      return FieldRenderers.hasMany;
+    }
+
+    // Check registered custom field renderers in browser
+    const custom = window.__customFieldRenderers && window.__customFieldRenderers[col.customField.type];
+    if (custom) {
+      return (col, value, onChange, readonly) => {
+        if (custom.edit && typeof custom.edit === 'object' && custom.edit.view) {
+          return m(custom.edit, { col, value, onChange, readonly });
+        } else if (typeof custom.edit === 'function') {
+          return custom.edit(value, onChange, col);
+        }
+      };
+    }
+  }
+
+  // Check schema type custom field renderers
+  if (col.type && window.__customFieldRenderers && window.__customFieldRenderers[col.type]) {
+    const custom = window.__customFieldRenderers[col.type];
+    return (col, value, onChange, readonly) => {
+      if (custom.edit && typeof custom.edit === 'object' && custom.edit.view) {
+        return m(custom.edit, { col, value, onChange, readonly });
+      } else if (typeof custom.edit === 'function') {
+        return custom.edit(value, onChange, col);
+      }
+    };
   }
 
   if (col.type === 'file') {
@@ -403,6 +432,8 @@ function getFieldRenderer(col, modelMeta) {
     array: 'array',
     uuid: 'string',
     nanoid: 'string',
+    belongsTo: 'belongsTo',
+    hasMany: 'hasMany',
   };
   return FieldRenderers[typeMap[col.type] || 'string'];
 }

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

@@ -65,10 +65,20 @@ const ModelList = {
 };
 
 // Format cell value based on column type
-function formatCellValue(value, col) {
+function formatCellValue(value, col, record = null) {
   if (value === null || value === undefined) {
     return m('span.text-gray-400 dark:text-slate-500.italic', 'null');
   }
+
+  const customRendererType = (col && col.customField && col.customField.type) || (col && col.type);
+  const custom = window.__customFieldRenderers && window.__customFieldRenderers[customRendererType];
+  if (custom && custom.display) {
+    if (typeof custom.display === 'object' && custom.display.view) {
+      return m(custom.display, { value, col, record });
+    } else if (typeof custom.display === 'function') {
+      return custom.display(value, record);
+    }
+  }
   
   switch (col?.type) {
     case 'boolean':
@@ -118,6 +128,24 @@ function formatCellValue(value, col) {
       }
       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/client/parts/08-record-list.js

@@ -478,7 +478,7 @@ const RecordList = {
                     ...displayColumns.map((col, i) => 
                       m('td.px-4.py-3.text-sm.whitespace-nowrap.text-gray-700 dark:text-slate-300.bg-white dark:bg-slate-800',
                         i === 0 ? { style: 'position: sticky; left: 40px; z-index: 5; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);' } : {},
-                        formatCellValue(record[col.name], col)
+                        formatCellValue(record[col.name], col, record)
                       )
                     ),
                     // Sticky actions cell (sticky right, box-shadow on left)

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/admin-panel/index.js

@@ -329,6 +329,25 @@ function adminPanelPlugin(options = {}) {
   };
 }
 
+/**
+ * Helper to serialize arbitrary JS structures, including functions
+ */
+function serializeJs(obj) {
+  if (typeof obj === 'function') {
+    return obj.toString();
+  }
+  if (Array.isArray(obj)) {
+    return '[' + obj.map(serializeJs).join(', ') + ']';
+  }
+  if (obj && typeof obj === 'object') {
+    const entries = Object.entries(obj).map(([key, val]) => {
+      return `${JSON.stringify(key)}: ${serializeJs(val)}`;
+    });
+    return '{' + entries.join(',\n') + '}';
+  }
+  return JSON.stringify(obj);
+}
+
 /**
  * Generate admin panel HTML
  * @param {string} adminPath - Admin panel path
@@ -343,6 +362,12 @@ function generateAdminPanelHtml(adminPath, registry) {
   const customPageComponent = generateCustomPageComponent();
 
   const settings = registry.settings;
+  const fieldRenderersCode = Array.from(registry.fieldRenderers.entries()).map(([type, r]) => {
+    return `window.__customFieldRenderers['${type}'] = {
+      display: ${r.display ? serializeJs(r.display) : 'null'},
+      edit: ${r.edit ? serializeJs(r.edit) : 'null'}
+    };`;
+  }).join('\n');
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -418,6 +443,10 @@ function generateAdminPanelHtml(adminPath, registry) {
     // Custom page components container
     window.__customPages = window.__customPages || {};
     ${registry.getClientComponents()}
+
+    // Custom field renderers container
+    window.__customFieldRenderers = window.__customFieldRenderers || {};
+    ${fieldRenderersCode}
   </script>
   <script>${appScript}</script>
 </body>

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 });