127 lines
3.7 KiB
Vue
127 lines
3.7 KiB
Vue
<template>
|
|
<div class="file-upload">
|
|
<label :for="inputId" class="block text-sm font-medium text-gray-700 mb-2">
|
|
{{ label }}
|
|
</label>
|
|
|
|
<div
|
|
class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
|
|
:class="{ 'border-green-500 bg-green-50': isDragOver, 'hover:border-gray-400': !isDragOver }"
|
|
@drop.prevent="handleDrop"
|
|
@dragover.prevent="isDragOver = true"
|
|
@dragleave.prevent="isDragOver = false"
|
|
>
|
|
<div class="space-y-1 text-center">
|
|
<svg
|
|
class="mx-auto h-12 w-12 text-gray-400"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
viewBox="0 0 48 48"
|
|
>
|
|
<path
|
|
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
<div class="flex text-sm text-gray-600">
|
|
<label
|
|
:for="inputId"
|
|
class="relative cursor-pointer bg-white rounded-md font-medium text-green-600 hover:text-green-500"
|
|
>
|
|
<span>Sélectionner des fichiers</span>
|
|
<input
|
|
:id="inputId"
|
|
ref="fileInput"
|
|
type="file"
|
|
class="sr-only"
|
|
:accept="accept"
|
|
:multiple="multiple"
|
|
@change="handleFileSelect"
|
|
>
|
|
</label>
|
|
<p class="pl-1">ou glisser-déposer</p>
|
|
</div>
|
|
|
|
<p class="text-xs text-gray-500">
|
|
{{ description }}
|
|
</p>
|
|
|
|
<div v-if="selectedFiles.length > 0" class="mt-4">
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">Fichiers sélectionnés :</h4>
|
|
<ul class="text-xs text-gray-600 space-y-1">
|
|
<li v-for="file in selectedFiles" :key="file.name" class="flex justify-between items-center">
|
|
<span class="truncate">{{ file.name }}</span>
|
|
<span class="text-gray-400">{{ formatFileSize(file.size) }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
default: 'Choisir des fichiers'
|
|
},
|
|
accept: {
|
|
type: String,
|
|
default: '.cbz,.cbr'
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: 'CBZ ou CBR jusqu\'à 100MB chacun'
|
|
},
|
|
modelValue: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue', 'files-selected']);
|
|
|
|
const fileInput = ref(null);
|
|
const isDragOver = ref(false);
|
|
const selectedFiles = ref([]);
|
|
|
|
const inputId = computed(() => `file-upload-${Math.random().toString(36).substr(2, 9)}`);
|
|
|
|
const formatFileSize = (bytes) => {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
};
|
|
|
|
const handleFileSelect = (event) => {
|
|
const files = Array.from(event.target.files);
|
|
selectedFiles.value = files;
|
|
emit('update:modelValue', files);
|
|
emit('files-selected', files);
|
|
};
|
|
|
|
const handleDrop = (event) => {
|
|
isDragOver.value = false;
|
|
const files = Array.from(event.dataTransfer.files);
|
|
selectedFiles.value = files;
|
|
emit('update:modelValue', files);
|
|
emit('files-selected', files);
|
|
};
|
|
|
|
// Watch for external changes to modelValue
|
|
watch(() => props.modelValue, (newFiles) => {
|
|
selectedFiles.value = newFiles;
|
|
}, { deep: true });
|
|
</script> |