Formular: Upload

<wm-upload class="event" multiple>
  Dateien in diesen Bereich ziehen
</wm-upload>

<script>
  const eventUpload = document.querySelector('.event');
  eventUpload.addEventListener('wm-files-added', e => {
    console.log(e.type)
    console.log(e.detail)
  })

  eventUpload.addEventListener('wm-files-removed', e => {
    console.log(e.type)
    console.log(e.detail)
  })

  eventUpload.addEventListener('wm-files-updated', e => {
    console.log(e.type)
    console.log(e.detail)
  })
</script>

<wm-upload class="upload2" multiple hideSelectedFiles>
  Dateien in diesen Bereich ziehen
</wm-upload>

<wm-table hidden class="files" sort="true, true, true, false">
  <table>
    <caption>Ausgewählte Dateien</caption>
    <thead>
      <tr>
        <th>Dateiname</th>
        <th>Zuletzt geändert</th>
        <th>Dateigröße</th>
        <th>Dateitype</th>
      </tr>
    </thead>

    <tbody>
    </tbody>
  </table>
</wm-table>


<template id="row">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <wm-button color="morgenrot" size="xs" kind="secondary">
        <button>
          <wm-icon iconid="close"></wm-icon>
        </button>
      </wm-button>
    </td>
  </tr>
</template>

<script>
  const upload = document.querySelector('.upload2')
  const fileList = document.querySelector('.files')
  const body = fileList.querySelector('tbody')
  const row = document.querySelector('#row')

  fileList.addEventListener('click', e => {
    if (e.target.closest('button[data-index]')) {
      const index = e.target.closest('button[data-index]').dataset.index;
      upload.removeFile(index, e)
    
      if (body.querySelectorAll('tr').length === 0) {
        fileList.setAttribute('hidden', 'hidden');
      }
    }
  })

  upload.addEventListener('wm-files-updated', e => {
    body.innerHTML = '';
    fileList.removeAttribute('hidden');

    for (let i = 0; i < e.detail.length; i++) {
      const newRow = row.content.cloneNode(true)
      const data = e.detail[i];
      const tds = newRow.querySelectorAll('td');
      const button = newRow.querySelector('button')

      tds[0].textContent = data.name;
      tds[1].textContent = data.lastModified;
      tds[2].textContent = `${Math.round(data.size / 1024)}KB`;
      tds[3].textContent = data.type;
      button.dataset.index = i

      body.appendChild(newRow)
    }

    if (fileList.querySelector('[aria-sort]')) {
      const th = fileList.querySelector('[aria-sort]');
      const direction = th.getAttribute('aria-sort') === 'ascending' ? 1 : 0
      fileList.rearrangeRows(th, direction)
    }
  })
</script>

<wm-form>
    <form>
      <wm-upload multiple id="events" required>
        Dateien in diesen Bereich ziehen
      </wm-upload>
      <button>Send</button>
    </form>
  </wm-form>
  <script>
    const upload2 = document.querySelector('#events');
    upload2.addEventListener('wm-focus', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    upload2.addEventListener('wm-input', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    upload2.addEventListener('wm-change', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    upload2.addEventListener('wm-blur', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    upload2.addEventListener('wm-invalid', e => {
      console.log(e.type)
      console.log(e.detail)
    })
  </script>