Inventory/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-base-content/50">
          {{ 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-base-content/50">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">
            <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-300 bg-base-200/70 flex items-center justify-center">
              <img
                v-if="isImageFile(file)"
                :src="getFilePreview(file)"
                class="h-full w-full object-cover"
                :alt="`Aperçu de ${file.name}`"
              >
              <component
                v-else
                :is="getIcon(file).component"
                class="h-6 w-6"
                :class="getIcon(file).colorClass"
                aria-hidden="true"
              />
            </div>
            <div class="flex flex-col">
              <span class="font-medium">{{ file.name }}</span>
              <span class="text-xs text-base-content/50">{{ 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, onBeforeUnmount } 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 previewUrls = new Map()

const isImageFile = (file) => (file?.type || '').startsWith('image/')

const getFilePreview = (file) => {
  if (!isImageFile(file)) { return null }
  if (!previewUrls.has(file)) {
    previewUrls.set(file, URL.createObjectURL(file))
  }
  return previewUrls.get(file)
}

const cleanupRemovedPreviews = (previousFiles = [], nextFiles = []) => {
  const nextSet = new Set(nextFiles)
  previousFiles.forEach((file) => {
    if (!nextSet.has(file)) {
      const url = previewUrls.get(file)
      if (url) {
        URL.revokeObjectURL(url)
        previewUrls.delete(file)
      }
    }
  })
}

const selectedFiles = internalFiles

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

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

const emitFiles = (files) => {
  cleanupRemovedPreviews(internalFiles.value, 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 })
}

onBeforeUnmount(() => {
  previewUrls.forEach((url) => {
    URL.revokeObjectURL(url)
  })
  previewUrls.clear()
})
</script>