fix: make admin media uploads reliable
This commit is contained in:
@@ -3,9 +3,12 @@
|
||||
<label class="file-uploader__dropzone-wrap">
|
||||
<div
|
||||
class="file-uploader__dropzone"
|
||||
:class="{ 'file-uploader__dropzone--active': isDragging }"
|
||||
:class="{
|
||||
'file-uploader__dropzone--active': isDragging,
|
||||
'file-uploader__dropzone--disabled': disabled,
|
||||
}"
|
||||
@dragover.prevent
|
||||
@dragenter="isDragging = true"
|
||||
@dragenter="onDragEnter"
|
||||
@dragleave="isDragging = false"
|
||||
@drop="handleDrop"
|
||||
>
|
||||
@@ -19,6 +22,7 @@
|
||||
class="file-uploader__input"
|
||||
:accept="accept"
|
||||
:multiple="multiple"
|
||||
:disabled="disabled"
|
||||
@change="handleFileSelect"
|
||||
/>
|
||||
</div>
|
||||
@@ -75,6 +79,7 @@ const props = defineProps({
|
||||
multiple: { type: Boolean, default: true },
|
||||
maxFiles: { type: Number, default: 10 },
|
||||
maxSize: { type: Number, default: 0 },
|
||||
disabled: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'select', 'remove', 'error'])
|
||||
@@ -82,6 +87,7 @@ const emit = defineEmits(['update:modelValue', 'select', 'remove', 'error'])
|
||||
const isDragging = ref(false)
|
||||
|
||||
const handleFileSelect = (event) => {
|
||||
if (props.disabled) return
|
||||
const files = [...event.target.files]
|
||||
emitFiles(files)
|
||||
event.target.value = ''
|
||||
@@ -90,10 +96,15 @@ const handleFileSelect = (event) => {
|
||||
const handleDrop = (event) => {
|
||||
event.preventDefault()
|
||||
isDragging.value = false
|
||||
if (props.disabled) return
|
||||
const files = [...event.dataTransfer.files]
|
||||
emitFiles(files)
|
||||
}
|
||||
|
||||
const onDragEnter = () => {
|
||||
if (!props.disabled) isDragging.value = true
|
||||
}
|
||||
|
||||
const emitFiles = (files) => {
|
||||
if (props.modelValue.length + files.length > props.maxFiles) {
|
||||
emit('error', `حداکثر تعداد فایل مجاز ${props.maxFiles} عدد است.`)
|
||||
@@ -155,6 +166,11 @@ const formatFileSize = (bytes) => {
|
||||
&--active {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
&__upload-icon {
|
||||
|
||||
Reference in New Issue
Block a user