.u-uploader
vue-clip.u-uploader-clip.row.mx-0(
:id="id",
:name="name",
:options="options",
:on-init="init",
:on-added-file="addedFile",
:on-sending="sending",
:on-complete="complete",
:on-drag-leave="stoppedDragging",
:on-drop="drop",
:on-total-progress="totalProgress",
:on-queue-complete="queueCompleted",
:on-max-files="maxFilesReached",
:class="{ 'is-invalid': !!error }"
)
template(slot="clip-uploader-action", scope="params")
slot(name="dz-message")
.dz-message.u-uploader-action.col-md-6(role="alert", :class="{ dragging: params.dragging }", ref="action")
.u-uploader-action-icon(@click="$refs.action.click()")
img.cloud(src="../assets/img/upload-cloud.png")
img.arrow(src="../assets/img/upload-arrow.png")
p.text-center Click or Drag and Drop files here
template(slot="clip-uploader-body", scope="props")
ul.list-unstyled.u-uploader-body.mb-0.mt-3.mb-mt-0.col-md-6.px-0.pl-md-3(v-if="files.length")
li.media.u-uploader-file(:key="key", v-for="(file, key) in files")
img.u-uploader-file-avatar.d-flex.mr-3(:src="file.dataUrl || require('../assets/img/upload-document.png')")
.media-body
p.mb-1.d-flex.align-items-center
span.u-uploader-file-name.font-weight-bold.mr-3 {{ file.name }}
span.u-uploader-file-size.mr-auto {{ convertBytes(file.size) }}
i.u-uploader-file-remove.fa.fa-times.fa-lg(@click="remove(key)")
.progress(v-if="file.status !== 'error' && file.status !== 'success'")
.progress-bar.bg-primary(role="progressbar", :style="{ width: file.progress + '%' }", :aria-valuenow="file.progress", aria-valuemin="0", aria-valuemax="100")
p.u-uploader-file-status.mb-0(:class="{ 'error-text': file.status === 'error' }") {{ file.status }}
.invalid-feedback(v-if="error") {{ error }}