upload multiplo, validation aummaumma

components/upload.vue

@@ -3,32 +3,35 @@
     <div class="modal-box">
       <h3 class="font-bold text-lg uppercase">Aggiungo una cosetta</h3>
       <form action="/api/cosette" method="post" enctype="multipart/form-data">
-        <label class="label">
-          <span class="label-text">Che roba è?</span>
-        </label>
-        <input type="text" name='name' placeholder="Nome" class="input input-bordered w-full" />
-        <label class="label">
-          <span class="label-text-alt">Metti il nome, modello, qualsiasi cosa che possa aiutare ad identificarmi</span>
-        </label>
 
-        <label class="label">
-          <span class="label-text-alt">Descrizione</span>
-        </label>
-        <textarea name='description' class='input input-bordered w-full'></textarea>
-        <label class="label">
-          <span class="label-text-alt">In che stato è? Dove l'hai trovato? </span>
-        </label>
+        <!-- NAME -->
+        <label for='name' class="label label-text pb-0">Che roba è?</label>
+        <input type="text" name='name' id='name' placeholder="Nome" required autocomplete='off'
+          class="input secondary peer input-bordered invalid:border-orange-300 w-full" />
+        <label class="label label-text-alt peer-invalid:text-orange-500 transition pt-0">Metti il nome
+          della cosetta, il modello, una sigla</label>
 
-        <label class="label">
-          <span class="label-text">Tag</span>
-        </label>
-        <input type="text" name='tags' placeholder="Tags" class="input input-bordered w-full" /><br />
+        <!-- DESCRIPTION -->
+        <label for="description" class="label label-text pb-0">Descrizione</label>
+        <textarea name='description' id='description'
+          class='textarea input-bordered w-full peer invalid:border-orange-300' required></textarea>
+        <label class="label label-text-alt peer-invalid:text-orange-500 pt-0">In che stato è? Dove l'hai
+          trovato? Insomma dacci una corposa descrizione.</label>
 
+        <label class="label label-text pb-0">Tag</label>
+        <input type="text" name='tags' placeholder="Tags" class="input input-bordered w-full" />
+        <label class="label label-text-alt pt-0">Delle parole chiavi per venirne a capo, separate da virgole (no non si
+          autocompleta)</label>
 
-        <label class="label">
-          <span class="label-text">Immagini</span>
-        </label>
-        <input class='w-full input input-bordered' type="file" name='imgs' />
+
+        <label for='images' class="label label-text pb-0">Immagini</label>
+        <input class='text-sm text-grey-500
+            file:mr-5 file:py-2 file:px-6
+            file:rounded-full file:border-0
+            file:text-sm file:font-medium
+            file:bg-blue-50 file:text-blue-700
+            hover:file:cursor-pointer hover:file:bg-amber-50
+            hover:file:text-amber-700' type="file" name='images' accept="image/*" multiple />
 
 
         <div class="modal-action">

server/api/cosette.post.js

@@ -1,13 +1,13 @@
 import { add } from '../controller'
-import { useBody, callHandler, sendRedirect } from 'h3'
+import { readBody, callHandler, sendRedirect } from 'h3'
 import { uploadService } from '../services/upload-service'
 
 export default defineEventHandler(async (event) => {
   try {
     const handler = uploadService().generateHandler()
     await callHandler(handler, event.req, event.res)
-    const body = await useBody(event)
-    body.imgs = [event.req.file?.filename]
+    const body = await readBody(event)
+    body.images = event.req.files.map(f => f.filename)
     add(body)
     return sendRedirect(event, '/')
   } catch (e) {

server/controller.js

@@ -14,10 +14,10 @@ export function load() {
 // load()
 
 export function add(cosetta) {
-  const q = db.prepare('INSERT INTO cosette (uuid, name, description, tags, images) VALUES(:uuid, :name, :description, :tags, :imgs)')
+  const q = db.prepare('INSERT INTO cosette (uuid, name, description, tags, images) VALUES(:uuid, :name, :description, :tags, :images)')
   cosetta.uuid = v4()
   cosetta.tags = JSON.stringify(cosetta.tags.split(',').map(t => t.toLowerCase().trim()))
-  cosetta.imgs = JSON.stringify(cosetta.imgs)
+  cosetta.images = JSON.stringify(cosetta.images)
   q.run(cosetta)
   return cosetta
 }
@@ -64,7 +64,7 @@ export function getComments(cosetta_uuid) {
   return q.all(cosetta_uuid)
 }
 
-export function getComment (uuid) {
+export function getComment(uuid) {
   const q = db.prepare('SELECT * from chan WHERE uuid = ?')
   const comment = q.get(uuid)
   return comment

server/services/upload-service.ts

@@ -11,14 +11,14 @@ export const uploadService = () => {
   }
   const { limits: templateLimits }: Options = {
     limits: {
-      files: 1,
+      files: 10,
       fieldNameSize: 400,
       fileSize: 80 * 1024 * 1024,
     },
   };
 
   const { filename }: multer.DiskStorageOptions = {
-    filename: (_req, file, cb) => {
+    filename: (_req, file, cb: Function) => {
       const type = path.extname(file.originalname)
       cb(null, v4() + type)
     }
@@ -36,11 +36,11 @@ export const uploadService = () => {
         }),
       };
 
-      return multer(options).single('imgs');
+      return multer(options).array('images', 5);
     } catch (e) {
       console.error('Upload error', e)
       throw e;
     }
   };
   return { generateHandler };
-};
+};