upload-component-template.vue

<template>
  <div class="upload">
    <h2 class="upload__title">
      Documents
      <span v-if="documents">
        ({{documents.length}})
      </span>
    </h2>

    <form enctype="multipart/form-data" novalidate class="upload__documents" id="document_upload">
      <div class="row">
        <div
          v-if="documents"
          v-for="document in documents"
          :key="document.uid"
          class="col-6 upload__documents__item">

          <FileIcon
            :document="document"
            :label="document.original_name"
            :deleteAction="deleteDocument">
          </FileIcon>
        </div>

      </div>

      <div class="upload__documents__choose">
        <input
          type="file"
          multiple
          name="documents"
          :disabled="saving"
          @change="filesChange($event.target.name, $event.target.files)"
          :accept="acceptedFileTypes"
          class="upload__documents__choose__file">

        <div :class="documentsClasses">
          Select or drag and drop documents into this area.
        </div>
      </div>

      <Spin size="large" v-if="saving"></Spin>
    </form>
  </div>
</template>