fix: remove send files functionality
This commit is contained in:
@@ -1,169 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
modelValue?: File[]
|
||||
maxFiles?: number
|
||||
acceptedTypes?: string
|
||||
maxFileSize?: number // in MB
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', files: File[]): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: () => [],
|
||||
maxFiles: 5,
|
||||
acceptedTypes: 'image/*,video/*',
|
||||
maxFileSize: 50,
|
||||
disabled: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const fileInputRef = ref<HTMLInputElement>()
|
||||
const isDragging = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const files = computed({
|
||||
get: () => props.modelValue || [],
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
const handleFilesSelected = (selectedFiles: FileList | null) => {
|
||||
if (!selectedFiles) return
|
||||
error.value = ''
|
||||
|
||||
const newFiles = Array.from(selectedFiles)
|
||||
|
||||
if (files.value.length + newFiles.length > props.maxFiles) {
|
||||
error.value = `Massimo ${props.maxFiles} file consentiti`
|
||||
return
|
||||
}
|
||||
|
||||
for (const file of newFiles) {
|
||||
if (file.size > props.maxFileSize! * 1024 * 1024) {
|
||||
error.value = `Il file ${file.name} supera il limite di ${props.maxFileSize}MB`
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
files.value = [...files.value, ...newFiles]
|
||||
}
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
files.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const openFileDialog = () => {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
const mb = Math.round(bytes / (1024 * 1024) * 10) / 10
|
||||
return mb > 0 ? `${mb}MB` : 'Piccolo'
|
||||
}
|
||||
|
||||
const getFileUrl = (file: File) => {
|
||||
return URL.createObjectURL(file)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="media-uploader">
|
||||
<div
|
||||
class="upload-area border-2 border-dashed rounded-3 p-4 text-center cursor-pointer position-relative"
|
||||
:class="{ 'border-primary bg-primary bg-opacity-10': isDragging, 'bg-light': !isDragging }"
|
||||
@dragover.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@drop.prevent="isDragging = false; handleFilesSelected(($event as DragEvent).dataTransfer?.files || null)"
|
||||
@click="!disabled && openFileDialog()"
|
||||
>
|
||||
<BIIcon name="it-upload" size="xl" color="primary" class="mb-3" />
|
||||
<div class="h6 font-weight-bold">
|
||||
Trascina i file qui o <span class="text-primary text-decoration-underline">clicca per selezionare</span>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-2">
|
||||
Massimo {{ maxFiles }} file ({{ maxFileSize }}MB max per file). Tipi: {{ acceptedTypes }}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
:multiple="maxFiles > 1"
|
||||
:accept="acceptedTypes"
|
||||
:disabled="disabled"
|
||||
class="d-none"
|
||||
@change="handleFilesSelected(($event.target as HTMLInputElement).files)"
|
||||
/>
|
||||
|
||||
<div v-if="error" class="alert alert-danger mt-3 py-2 small" role="alert">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div v-if="files.length > 0" class="mt-4 row g-3">
|
||||
<div v-for="(file, idx) in files" :key="`file-${idx}`" class="col-6 col-md-4 col-lg-3">
|
||||
<div class="card h-100 position-relative shadow-sm border-0">
|
||||
<div class="ratio ratio-1x1 bg-light rounded-top overflow-hidden">
|
||||
<img v-if="file.type.startsWith('image/')" :src="getFileUrl(file)" class="object-fit-cover" :alt="file.name" />
|
||||
<video v-else-if="file.type.startsWith('video/')" :src="getFileUrl(file)" class="object-fit-cover"></video>
|
||||
<div v-else class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-25">
|
||||
<BIIcon name="it-file" size="xl" color="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 rounded-circle p-1 d-flex align-items-center justify-content-center shadow"
|
||||
style="width: 28px; height: 28px; z-index: 10;"
|
||||
@click.stop="removeFile(idx)"
|
||||
:disabled="disabled"
|
||||
title="Rimuovi file"
|
||||
>
|
||||
<BIIcon name="it-close" size="sm" color="white" />
|
||||
</button>
|
||||
|
||||
<div class="card-body p-2 d-flex flex-column justify-content-between">
|
||||
<div class="small text-truncate fw-semibold" :title="file.name">{{ file.name }}</div>
|
||||
<div class="small text-muted d-flex justify-content-between align-items-center mt-1">
|
||||
<span>{{ formatFileSize(file.size) }}</span>
|
||||
<div class="progress flex-grow-1 ms-2" style="height: 4px;" title="Pronto per l'upload">
|
||||
<div class="progress-bar bg-success w-100" role="progressbar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.upload-area {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.upload-area:hover:not(.border-primary) {
|
||||
background-color: #f8f9fa !important;
|
||||
border-color: #0066cc !important;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.border-dashed {
|
||||
border-style: dashed !important;
|
||||
}
|
||||
.border-2 {
|
||||
border-width: 2px !important;
|
||||
}
|
||||
.object-fit-cover {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user