70 lines
2.8 KiB
PHP
70 lines
2.8 KiB
PHP
<!-- resources/views/livewire/file-upload.blade.php -->
|
|
<div class="relative p-8 mt-4 border-2 border-dashed rounded-lg"
|
|
x-data="{ isDragging: false }"
|
|
@dragover.prevent="isDragging = true"
|
|
@dragleave.prevent="isDragging = false"
|
|
@drop.prevent="isDragging = false; $wire.uploadFiles(event.dataTransfer.files)"
|
|
:class="{ 'border-blue-500 bg-blue-50': isDragging }">
|
|
|
|
<div class="text-center">
|
|
<input type="file" id="fileInput" wire:model="files" multiple class="hidden">
|
|
|
|
<template x-if="!$wire.previews.length">
|
|
<div>
|
|
<x-icons icon="upload" class="w-12 h-12 mx-auto text-gray-400" />
|
|
<p class="mt-2 text-sm text-gray-600">
|
|
Arrastra archivos aquí o
|
|
<button class="text-blue-600 hover:underline"
|
|
@click="document.getElementById('fileInput').click()">
|
|
selecciona desde tu equipo
|
|
</button>
|
|
</p>
|
|
<p class="mt-1 text-xs text-gray-500">
|
|
Máximo {{ $maxSize }}MB por archivo
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="$wire.previews.length">
|
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
|
<template x-for="(preview, index) in $wire.previews" :key="index">
|
|
<div class="relative p-2 border rounded-lg">
|
|
<button class="absolute top-1 right-1 text-red-500 hover:text-red-700"
|
|
@click="$wire.removePreview(index)">
|
|
<x-icons icon="x" class="w-4 h-4" />
|
|
</button>
|
|
|
|
<template x-if="preview.preview">
|
|
<img :src="preview.preview" class="object-cover h-32 mx-auto rounded">
|
|
</template>
|
|
|
|
<template x-if="!preview.preview">
|
|
<x-icons icon="document" class="w-32 h-32 mx-auto text-gray-400" />
|
|
</template>
|
|
|
|
<div class="mt-2 text-xs truncate" x-text="preview.name"></div>
|
|
<div class="text-xs text-gray-500"
|
|
x-text="formatBytes(preview.size)"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function formatBytes(bytes) {
|
|
const units = ['B', 'KB', 'MB', 'GB'];
|
|
let size = bytes;
|
|
let unitIndex = 0;
|
|
|
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
size /= 1024;
|
|
unitIndex++;
|
|
}
|
|
|
|
return `${size.toFixed(1)} ${units[unitIndex]}`;
|
|
}
|
|
</script>
|
|
|