Inventory_frontend/app/components/DocumentUpload.vue

<template>
  <div
    class="border-2 border-dashed rounded-lg p-6 transition-colors"
    :class="dragActive ? 'border-primary bg-primary/5' : 'border-base-300 bg-base-100'"
    @dragover.prevent="onDragOver"
    @dragleave.prevent="onDragLeave"
    @drop.prevent="onDrop"
  >
    <div class="flex flex-col items-center gap-3 text-center">
      <IconLucideCloudUpload class="w-10 h-10 text-primary" aria-hidden="true" />

      <div>
        <h3 class="font-semibold">{{ title }}</h3>
        <p class="text-sm text-gray-500">{{ subtitle }}</p>
      </div>

      <div class="flex flex-wrap justify-center gap-2">
        <button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
          Sélectionner des fichiers
        </button>
        <span class="text-xs text-gray-500">ou glisser-déposer ici</span>
      </div>

      <input
        ref="fileInput"
        type="file"
        class="hidden"
        :accept="accept"
        :multiple="multiple"
        @change="onFileChange"
      />

      <ul v-if="selectedFiles.length" class="mt-4 w-full space-y-2 text-left">
        <li v-for="file in selectedFiles" :key="file.name" class="flex items-center justify-between text-sm">
          <div class="flex items-center gap-3">
            <component
              :is="getIcon(file).component"
              class="h-6 w-6"
              :class="getIcon(file).colorClass"
              aria-hidden="true"
            />
            <div class="flex flex-col">
              <span class="font-medium">{{ file.name }}</span>
              <span class="text-xs text-gray-500">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
            </div>
          </div>
          <button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">
            Retirer
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useToast } from '~/composables/useToast'
import { getFileIcon } from '~/utils/fileIcons'
import IconLucideCloudUpload from '~icons/lucide/cloud-upload'

const props = defineProps({
  title: {
    type: String,
    default: 'Ajouter des documents',
  },
  subtitle: {
    type: String,
    default: 'Formats acceptés : PDF, images, textes…',
  },
  accept: {
    type: String,
    default: '',
  },
  multiple: {
    type: Boolean,
    default: true,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
  maxFileSizeMb: {
    type: Number,
    default: 200,
  },
})

const emit = defineEmits(['update:modelValue', 'files-added'])

const dragActive = ref(false)
const fileInput = ref(null)
const internalFiles = ref([])
const { showError } = useToast()

const selectedFiles = computed(() => internalFiles.value)

watch(
  () => props.modelValue,
  (newValue) => {
    if (Array.isArray(newValue)) {
      internalFiles.value = [...newValue]
    }
  },
  { immediate: true }
)

const triggerFileDialog = () => {
  fileInput.value?.click()
}

const emitFiles = (files) => {
  internalFiles.value = files
  emit('update:modelValue', files)
  emit('files-added', files)
}

const handleFiles = (fileList) => {
  const files = Array.from(fileList)
  const maxBytes = props.maxFileSizeMb * 1024 * 1024
  if (!props.multiple) {
    const validFile = files[0]
    if (validFile && validFile.size > maxBytes) {
      showError(`Le fichier "${validFile.name}" dépasse la limite de ${props.maxFileSizeMb} Mo`)
      return
    }
    emitFiles(files.slice(0, 1))
  } else {
    const merged = [...internalFiles.value]
    files.forEach((file) => {
      if (file.size > maxBytes) {
        showError(`Le fichier "${file.name}" dépasse la limite de ${props.maxFileSizeMb} Mo`)
        return
      }
      if (!merged.some(existing => existing.name === file.name && existing.size === file.size)) {
        merged.push(file)
      }
    })
    emitFiles(merged)
  }
}

const onFileChange = (event) => {
  handleFiles(event.target.files || [])
  event.target.value = ''
}

const onDragOver = () => {
  dragActive.value = true
}

const onDragLeave = () => {
  dragActive.value = false
}

const onDrop = (event) => {
  dragActive.value = false
  if (event.dataTransfer?.files?.length) {
    handleFiles(event.dataTransfer.files)
  }
}

const removeFile = (fileToRemove) => {
  const filtered = internalFiles.value.filter(file => file !== fileToRemove)
  emitFiles(filtered)
}

const formatSize = (size) => {
  if (!size) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB']
  const index = Math.floor(Math.log(size) / Math.log(1024))
  const formatted = size / Math.pow(1024, index)
  return `${formatted.toFixed(1)} ${units[index]}`
}

const getIcon = (file) => {
  return getFileIcon({ name: file.name, mime: file.type })
}
</script>