cosette/components/upload.vue

<template>
  <div class="modal" id="my-modal">
    <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">

        <!-- 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" for='name'>Metti il nome
          della cosetta, il modello, una sigla</label>

        <!-- 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-valid:text-grey-300 peer-invalid:text-orange-500 pt-0"
          for='description'>In che stato è?
          Dove l'hai
          trovato? Insomma dacci una corposa descrizione.</label>

        <!-- TAG -->
        <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 for='images' class="label label-text mt-3 pb-0">Immagini - massimo 10 </label>
        <input class='text-sm text-grey-500
            file:mr-5 file:py-2 file:px-6
            file:rounded-md 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-orange-700' required type="file" name='images' accept="image/*" multiple />


        <div class="modal-action divider mt-10">
          <a href="#" class="btn">Annulla</a>
          <button class='btn btn-primary' type='submit'>Aggiungi</button>
        </div>
      </form>
    </div>
  </div>
</template>