| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- div(class="file-upload")
- div(
- class="file-upload__dropzone"
- :class="{ 'file-upload__dropzone--dragging': isDragging }"
- @dragover="onDragOver"
- @dragleave="onDragLeave"
- @drop="onDrop"
- )
- div(class="file-upload__content")
- div(class="file-upload__icon") 📁
- h3(class="file-upload__title") Перетащите файлы сюда
- p(class="file-upload__subtitle") или
- label(class="file-upload__browse")
- input(
- type="file"
- :accept="accept"
- :multiple="multiple"
- @change="onFileSelect"
- class="file-upload__input"
- )
- span(class="file-upload__browse-text") выберите файлы
- p(class="file-upload__hint") Поддерживаемые форматы: {{ accept }}
-
- div(v-if="selectedFiles.length > 0" class="file-upload__files")
- h4(class="file-upload__files-title") Выбранные файлы:
-
- div(
- v-for="(file, index) in selectedFiles"
- :key="index"
- class="file-upload__file"
- )
- span(class="file-upload__file-icon") {{ getFileIcon(file) }}
- div(class="file-upload__file-info")
- span(class="file-upload__file-name") {{ file.name }}
- span(class="file-upload__file-size") {{ (file.size / 1024 / 1024).toFixed(2) }} MB
- button(
- @click="removeFile(index)"
- class="file-upload__remove"
- title="Удалить файл"
- ) ×
-
- div(v-if="isUploading" class="file-upload__progress")
- div(class="file-upload__progress-bar")
- div(
- class="file-upload__progress-fill"
- :style="{ width: uploadProgress + '%' }"
- )
- span(class="file-upload__progress-text") {{ uploadProgress }}%
-
- div(v-if="selectedFiles.length > 0 && !isUploading" class="file-upload__actions")
- ui-button(
- @click="uploadFiles"
- type="primary"
- :disabled="isUploading"
- ) Загрузить файлы
|
