upload multiplo, validation aummaumma

This commit is contained in:
lesion 2022-08-23 23:26:57 +02:00
parent 9c2ff71a2c
commit 3472b11168
4 changed files with 35 additions and 32 deletions

View file

@ -3,32 +3,35 @@
<div class="modal-box"> <div class="modal-box">
<h3 class="font-bold text-lg uppercase">Aggiungo una cosetta</h3> <h3 class="font-bold text-lg uppercase">Aggiungo una cosetta</h3>
<form action="/api/cosette" method="post" enctype="multipart/form-data"> <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"> <!-- NAME -->
<span class="label-text-alt">Descrizione</span> <label for='name' class="label label-text pb-0">Che roba è?</label>
</label> <input type="text" name='name' id='name' placeholder="Nome" required autocomplete='off'
<textarea name='description' class='input input-bordered w-full'></textarea> class="input secondary peer input-bordered invalid:border-orange-300 w-full" />
<label class="label"> <label class="label label-text-alt peer-invalid:text-orange-500 transition pt-0">Metti il nome
<span class="label-text-alt">In che stato è? Dove l'hai trovato? </span> della cosetta, il modello, una sigla</label>
</label>
<label class="label"> <!-- DESCRIPTION -->
<span class="label-text">Tag</span> <label for="description" class="label label-text pb-0">Descrizione</label>
</label> <textarea name='description' id='description'
<input type="text" name='tags' placeholder="Tags" class="input input-bordered w-full" /><br /> 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"> <label for='images' class="label label-text pb-0">Immagini</label>
<span class="label-text">Immagini</span> <input class='text-sm text-grey-500
</label> file:mr-5 file:py-2 file:px-6
<input class='w-full input input-bordered' type="file" name='imgs' /> 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"> <div class="modal-action">

View file

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

View file

@ -14,10 +14,10 @@ export function load() {
// load() // load()
export function add(cosetta) { 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.uuid = v4()
cosetta.tags = JSON.stringify(cosetta.tags.split(',').map(t => t.toLowerCase().trim())) 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) q.run(cosetta)
return cosetta return cosetta
} }

View file

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