webspresso 0.0.67 → 0.0.68

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

@@ -1,124 +1,193 @@
 /**
  * File Upload Field Renderer
- * Droppable file upload component
+ * POST multipart field "file" to window.__ADMIN_CONFIG__.settings.uploadUrl
  */
 
+function getUploadUrlFromAdminConfig() {
+  try {
+    const cfg = typeof window !== 'undefined' ? window.__ADMIN_CONFIG__ : null;
+    const u = cfg && cfg.settings && cfg.settings.uploadUrl;
+    return u ? String(u) : '';
+  } catch {
+    return '';
+  }
+}
+
 module.exports = {
   FileUploadField: {
     oncreate: (vnode) => {
-      const { name, value = '', onchange, meta = {} } = vnode.attrs;
+      const { name, meta = {} } = vnode.attrs;
+      if (!getUploadUrlFromAdminConfig()) return;
+
       const dropZoneId = 'drop-zone-' + name;
-      
       const dropZone = document.getElementById(dropZoneId);
       if (!dropZone) return;
-      
-      // Prevent default drag behaviors
-      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+
+      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
         dropZone.addEventListener(eventName, (e) => {
           e.preventDefault();
           e.stopPropagation();
         });
       });
-      
-      // Highlight drop zone when item is dragged over it
-      ['dragenter', 'dragover'].forEach(eventName => {
+
+      ['dragenter', 'dragover'].forEach((eventName) => {
         dropZone.addEventListener(eventName, () => {
-          dropZone.classList.add('border-blue-500', 'bg-blue-50');
+          dropZone.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-slate-800');
         });
       });
-      
-      ['dragleave', 'drop'].forEach(eventName => {
+
+      ['dragleave', 'drop'].forEach((eventName) => {
         dropZone.addEventListener(eventName, () => {
-          dropZone.classList.remove('border-blue-500', 'bg-blue-50');
+          dropZone.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-slate-800');
         });
       });
-      
-      // Handle dropped files
+
       dropZone.addEventListener('drop', (e) => {
         const files = e.dataTransfer.files;
         if (files.length > 0) {
-          handleFile(files[0], vnode, meta);
+          handleFileUpload(files[0], vnode, meta);
         }
       });
-      
-      // Handle file input change
+
       const fileInput = dropZone.querySelector('input[type=file]');
       if (fileInput) {
         fileInput.addEventListener('change', (e) => {
           if (e.target.files.length > 0) {
-            handleFile(e.target.files[0], vnode, meta);
+            handleFileUpload(e.target.files[0], vnode, meta);
           }
         });
       }
     },
-    
+
     view: (vnode) => {
       const { name, value = '', meta = {}, required = false } = vnode.attrs;
       const dropZoneId = 'drop-zone-' + name;
-      const maxSize = meta.maxSize || 5 * 1024 * 1024; // 5MB default
+      const maxSize = meta.maxSize || meta.maxBytes || 10 * 1024 * 1024;
       const accept = meta.accept || '*/*';
-      
+      const uploadUrl = getUploadUrlFromAdminConfig();
+
+      if (!uploadUrl) {
+        return m('.mb-4', [
+          m(
+            'label.block.text-sm.font-medium.mb-2',
+            meta.label || name,
+            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.'),
+          m('input.w-full.px-3.py-2.border.rounded', {
+            type: 'text',
+            name,
+            value: typeof value === 'string' ? value : '',
+            placeholder: 'https://… or /uploads/…',
+            required,
+            oninput: (e) => {
+              if (vnode.attrs.onchange) vnode.attrs.onchange(e.target.value);
+            },
+          }),
+        ]);
+      }
+
       return m('.mb-4', [
-        m('label.block.text-sm.font-medium.mb-2',
+        m(
+          'label.block.text-sm.font-medium.mb-2',
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('div#drop-zone-' + name + '.border-2.border-dashed.border-gray-300 dark:border-slate-600.rounded.p-8.text-center', {
-          style: 'cursor: pointer;'
-        }, [
-          m('input[type=file]', {
-            class: 'hidden',
-            id: 'file-input-' + name,
-            accept,
-            onchange: (e) => {
-              if (e.target.files.length > 0) {
-                handleFile(e.target.files[0], vnode, meta);
-              }
-            }
-          }),
-          m('div', [
-            m('p.text-gray-600 dark:text-slate-400.mb-2', 'Drag and drop a file here, or'),
-            m('label.text-blue-600.hover:text-blue-800.cursor-pointer', {
-              for: 'file-input-' + name
-            }, 'browse'),
-          ]),
-          value ? m('.mt-4', [
-            m('p.text-sm.text-gray-600', 'Current file: ' + (typeof value === 'string' ? value : value.name || 'uploaded')),
-            m('button.text-red-600.hover:text-red-800.text-sm.mt-2', {
-              onclick: () => {
-                if (vnode.attrs.onchange) {
-                  vnode.attrs.onchange('');
+        m(
+          'div.border-2.border-dashed.border-gray-300.dark:border-slate-600.rounded.p-8.text-center',
+          {
+            id: dropZoneId,
+            style: 'cursor: pointer;',
+          },
+          [
+            m('input[type=file]', {
+              class: 'hidden',
+              id: 'file-input-' + name,
+              accept,
+              onchange: (e) => {
+                if (e.target.files.length > 0) {
+                  handleFileUpload(e.target.files[0], vnode, meta);
                 }
-              }
-            }, 'Remove'),
-          ]) : null,
-        ]),
+              },
+            }),
+            m('div', [
+              m('p.text-gray-600.dark:text-slate-400.mb-2', 'Drag and drop a file here, or'),
+              m(
+                'label.text-blue-600.hover:text-blue-800.cursor-pointer',
+                { for: 'file-input-' + name },
+                'browse'
+              ),
+            ]),
+            value
+              ? m('.mt-4', [
+                  m(
+                    'p.text-sm.text-gray-600.break-all',
+                    'Current: ' + (typeof value === 'string' ? value : value.name || 'uploaded')
+                  ),
+                  m(
+                    'button.text-red-600.hover:text-red-800.text-sm.mt-2',
+                    {
+                      type: 'button',
+                      onclick: () => {
+                        if (vnode.attrs.onchange) vnode.attrs.onchange('');
+                      },
+                    },
+                    'Remove'
+                  ),
+                ])
+              : null,
+          ]
+        ),
         m('input[type=hidden]', {
           name,
           value: typeof value === 'string' ? value : '',
         }),
+        m(
+          'p.text-xs.text-gray-500.mt-1',
+          'Max ' + Math.round(maxSize / 1024 / 1024) + ' MB (server enforces limits)'
+        ),
       ]);
-    }
+    },
   },
 };
 
 /**
- * Handle file upload
- * @param {File} file - File object
- * @param {Object} vnode - Mithril vnode
- * @param {Object} meta - Field metadata
+ * @param {File} file
+ * @param {import('mithril').Vnode} vnode
+ * @param {Object} meta
  */
-function handleFile(file, vnode, meta) {
-  const maxSize = meta.maxSize || 5 * 1024 * 1024;
-  
+async function handleFileUpload(file, vnode, meta) {
+  const maxSize = meta.maxSize || meta.maxBytes || 10 * 1024 * 1024;
   if (file.size > maxSize) {
-    alert(`File size exceeds maximum allowed size of ${Math.round(maxSize / 1024 / 1024)}MB`);
+    alert(`File too large (max ${Math.round(maxSize / 1024 / 1024)} MB).`);
     return;
   }
-  
-  // For now, just store the file name
-  // In a real implementation, you'd upload to server and get URL
-  if (vnode.attrs.onchange) {
-    vnode.attrs.onchange(file.name);
+
+  const uploadUrl = getUploadUrlFromAdminConfig();
+  if (!uploadUrl) {
+    alert('Upload URL is not configured.');
+    return;
+  }
+
+  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(data.message || data.error || `Upload failed (${res.status})`);
+      return;
+    }
+    const url = data.url || data.publicUrl || '';
+    if (vnode.attrs.onchange) vnode.attrs.onchange(url);
+    if (typeof m !== 'undefined' && m.redraw) m.redraw();
+  } catch (err) {
+    alert(err.message || 'Upload failed');
   }
 }

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

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

package/plugins/admin-panel/index.js

@@ -30,6 +30,7 @@ const { registerModule } = require('./core/admin-module');
  * @param {string} [options.userManagement.model='User'] - User model name
  * @param {Object} [options.userManagement.fields] - Field mappings
  * @param {Function} [options.configure] - Configuration callback (registry) => void
+ * @param {string} [options.uploadUrl] - POST URL for file uploads (overrides app.get('webspresso.uploadPath') from uploadPlugin)
  * @returns {Object} Plugin definition
  */
 function adminPanelPlugin(options = {}) {
@@ -41,6 +42,7 @@ function adminPanelPlugin(options = {}) {
     auth,
     userManagement: userMgmtConfig,
     configure,
+    uploadUrl: uploadUrlOption,
   } = options;
 
   // Validate required options
@@ -128,6 +130,12 @@ function adminPanelPlugin(options = {}) {
       this.api._ctx = ctx;
       const { app } = ctx;
 
+      const uploadUrlResolved =
+        uploadUrlOption || app.get('webspresso.uploadPath') || null;
+      if (uploadUrlResolved) {
+        registry.configure({ uploadUrl: uploadUrlResolved });
+      }
+
       // Check if admin_users table exists (migration run)
       db.knex.schema.hasTable('admin_users').then((hasAdminTable) => {
         if (!hasAdminTable) {

package/plugins/index.js

@@ -16,6 +16,7 @@ const swaggerPlugin = require('./swagger');
 const healthCheckPlugin = require('./health-check');
 const restResourcePlugin = require('./rest-resources');
 const ormCacheAdminPlugin = require('./orm-cache-admin');
+const { uploadPlugin, createLocalFileProvider } = require('./upload');
 
 module.exports = {
   sitemapPlugin,
@@ -31,5 +32,7 @@ module.exports = {
   healthCheckPlugin,
   restResourcePlugin,
   ormCacheAdminPlugin,
+  uploadPlugin,
+  createLocalFileProvider,
 };
 

package/plugins/upload/index.js

@@ -0,0 +1,188 @@
+/**
+ * File upload plugin — multipart parsing, validation, pluggable storage.
+ * @module plugins/upload
+ */
+
+const multer = require('multer');
+const path = require('path');
+const { createLocalFileProvider } = require('./local-file-provider');
+
+/**
+ * @typedef {import('express').Request} ExpressRequest
+ */
+
+/**
+ * @typedef {Object} UploadPutArgs
+ * @property {Buffer} [buffer]
+ * @property {import('stream').Readable} [stream]
+ * @property {string} originalName
+ * @property {string} mimeType
+ * @property {number} size
+ * @property {ExpressRequest} req
+ */
+
+/**
+ * @typedef {Object} UploadPutResult
+ * @property {string} publicUrl
+ * @property {string} [key]
+ */
+
+/**
+ * @typedef {Object} UploadStorageProvider
+ * @property {(args: UploadPutArgs) => Promise<UploadPutResult>} put
+ */
+
+/**
+ * @param {string} [p]
+ * @returns {string}
+ */
+function normalizeRoutePath(p) {
+  const s = (p || '/api/upload').trim();
+  return s.startsWith('/') ? s : `/${s}`;
+}
+
+/**
+ * @param {string} [name]
+ * @returns {string} lowercase extension without dot
+ */
+function extensionFromName(name) {
+  return path.extname(path.basename(name || '')).replace(/^\./, '').toLowerCase();
+}
+
+/**
+ * @param {number} maxBytes
+ * @param {string} fieldName
+ * @returns {import('express').RequestHandler}
+ */
+function createMulterSingleMiddleware(maxBytes, fieldName) {
+  const upload = multer({
+    storage: multer.memoryStorage(),
+    limits: { fileSize: maxBytes, files: 1 },
+  });
+  return upload.single(fieldName);
+}
+
+/**
+ * @param {unknown} err
+ * @returns {{ status: number, message: string }}
+ */
+function multerErrorResponse(err) {
+  if (err instanceof multer.MulterError) {
+    if (err.code === 'LIMIT_FILE_SIZE') {
+      return { status: 413, message: 'File too large' };
+    }
+    if (err.code === 'LIMIT_FILE_COUNT' || err.code === 'LIMIT_UNEXPECTED_FILE') {
+      return { status: 400, message: 'Invalid upload (too many files or unexpected field)' };
+    }
+    return { status: 400, message: err.message || 'Upload error' };
+  }
+  return { status: 400, message: err instanceof Error ? err.message : String(err) };
+}
+
+/**
+ * @param {Object} [options]
+ * @param {string} [options.path='/api/upload'] — POST route
+ * @param {UploadStorageProvider} [options.provider] — Storage backend; default: local disk
+ * @param {Object} [options.local] — Shorthand for createLocalFileProvider when provider omitted
+ * @param {string} [options.local.destDir]
+ * @param {string} [options.local.publicBasePath]
+ * @param {number} [options.maxBytes=10485760] — 10 MiB default
+ * @param {string[]|null} [options.mimeAllowlist] — If set, reject other MIME types (415)
+ * @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
+ * @returns {Object} Webspresso plugin
+ */
+function uploadPlugin(options = {}) {
+  const {
+    path: routePath = '/api/upload',
+    provider: userProvider,
+    local,
+    maxBytes = 10 * 1024 * 1024,
+    mimeAllowlist = null,
+    extensionAllowlist = null,
+    middleware = [],
+    fieldName = 'file',
+  } = options;
+
+  const normalizedPath = normalizeRoutePath(routePath);
+
+  const provider =
+    userProvider ||
+    createLocalFileProvider({
+      destDir: local?.destDir,
+      publicBasePath: local?.publicBasePath,
+    });
+
+  const mw = (Array.isArray(middleware) ? middleware : [middleware]).filter(Boolean);
+  const parseMultipart = createMulterSingleMiddleware(maxBytes, fieldName);
+
+  return {
+    name: 'upload',
+    version: '1.0.0',
+    description: 'Multipart file uploads with pluggable storage',
+
+    onRoutesReady(ctx) {
+      const { app } = ctx;
+      app.set('webspresso.uploadPath', normalizedPath);
+
+      const handler = (req, res) => {
+        parseMultipart(req, res, async (err) => {
+          if (err) {
+            const { status, message } = multerErrorResponse(err);
+            return res.status(status).json({ error: message, message });
+          }
+
+          const file = req.file;
+          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,
+            });
+          } catch (e) {
+            const message = e instanceof Error ? e.message : String(e);
+            res.status(500).json({ error: message, message });
+          }
+        });
+      };
+
+      ctx.addRoute('post', normalizedPath, ...mw, handler);
+
+      if (process.env.NODE_ENV !== 'production') {
+        console.log(`  Upload plugin: POST ${normalizedPath}`);
+      }
+    },
+  };
+}
+
+module.exports = {
+  uploadPlugin,
+  createLocalFileProvider,
+};

package/plugins/upload/local-file-provider.js

@@ -0,0 +1,122 @@
+/**
+ * Default upload storage: write files to local disk and expose a public URL path.
+ * @module plugins/upload/local-file-provider
+ */
+
+const fs = require('fs/promises');
+const path = require('path');
+const { randomBytes } = require('crypto');
+
+/**
+ * Common MIME → canonical extension (lowercase, with leading dot).
+ * Used so stored filenames match the MIME the server accepted (see uploadPlugin mimeAllowlist).
+ * Does not verify file content; spoofed MIME is a separate concern (allowlist + optional magic-byte later).
+ */
+const MIME_TO_EXT = {
+  'image/jpeg': '.jpg',
+  'image/png': '.png',
+  'image/gif': '.gif',
+  'image/webp': '.webp',
+  'image/svg+xml': '.svg',
+  'image/avif': '.avif',
+  'application/pdf': '.pdf',
+  'text/plain': '.txt',
+  'text/csv': '.csv',
+  'text/html': '.html',
+  'application/json': '.json',
+  'application/zip': '.zip',
+  'application/gzip': '.gz',
+  'video/mp4': '.mp4',
+  'video/webm': '.webm',
+  'audio/mpeg': '.mp3',
+  'audio/webm': '.weba',
+};
+
+/**
+ * Normalize public URL prefix (no trailing slash).
+ * @param {string} [publicBasePath]
+ * @returns {string}
+ */
+function normalizePublicBase(publicBasePath) {
+  let p = (publicBasePath == null || publicBasePath === '' ? '/uploads' : String(publicBasePath)).trim();
+  p = p.replace(/\/+$/, '');
+  if (!p.startsWith('/')) {
+    p = `/${p}`;
+  }
+  return p || '/uploads';
+}
+
+/**
+ * @param {string} [mimeType]
+ * @returns {string|null} extension with leading dot, or null if unknown
+ */
+function canonicalExtFromMime(mimeType) {
+  if (!mimeType || typeof mimeType !== 'string') return null;
+  const base = mimeType.split(';')[0].trim().toLowerCase();
+  return MIME_TO_EXT[base] || null;
+}
+
+/**
+ * Prefer a safe extension from the filename; align with MIME when we have a mapping.
+ * @param {string} [mimeType]
+ * @param {string} extFromName - already normalized (lowercase, with dot or '')
+ * @returns {string} extension with leading dot or empty string
+ */
+function resolveStoredExtension(mimeType, extFromName) {
+  const fromMime = canonicalExtFromMime(mimeType);
+  if (fromMime) {
+    if (!extFromName || extFromName !== fromMime) {
+      return fromMime;
+    }
+    return extFromName;
+  }
+  return extFromName || '';
+}
+
+/**
+ * @param {Object} [options]
+ * @param {string} [options.destDir] — Absolute or cwd-relative directory for stored files
+ * @param {string} [options.publicBasePath='/uploads'] — URL prefix (first segment of public URL)
+ * @returns {import('./index').UploadStorageProvider}
+ */
+function createLocalFileProvider(options = {}) {
+  const destDir = path.resolve(
+    options.destDir || path.join(process.cwd(), 'public', 'uploads')
+  );
+  const publicBase = normalizePublicBase(options.publicBasePath);
+
+  return {
+    async put({ buffer, originalName, mimeType, size, req }) {
+      void size;
+      void req;
+      await fs.mkdir(destDir, { recursive: true });
+
+      const base = path.basename(originalName || 'upload');
+      let ext = path.extname(base).toLowerCase();
+      if (!/^\.[a-z0-9]{1,12}$/.test(ext)) {
+        ext = '';
+      }
+
+      ext = resolveStoredExtension(mimeType, ext);
+
+      const storedName = `${Date.now()}-${randomBytes(8).toString('hex')}${ext}`;
+      const target = path.join(destDir, storedName);
+      const resolvedDest = path.resolve(destDir);
+      if (!target.startsWith(resolvedDest + path.sep) && target !== resolvedDest) {
+        throw new Error('Invalid storage path');
+      }
+
+      await fs.writeFile(target, buffer);
+
+      const publicUrl = `${publicBase}/${storedName}`.replace(/\/{2,}/g, '/');
+      return { publicUrl, key: storedName };
+    },
+  };
+}
+
+module.exports = {
+  createLocalFileProvider,
+  normalizePublicBase,
+  canonicalExtFromMime,
+  resolveStoredExtension,
+};