<div class="max-w-md w-full mx-auto p-6 bg-white rounded-lg shadow-md" x-data="{
files: [],
handleFileChange(event) {
this.files = Array.from(event.target.files).map(file => ({
name: file.name,
size: (file.size / 1024).toFixed(2) + ' KB'
}));
},
removeFile(index) {
this.files.splice(index, 1);
document.getElementById('fileInput').value = '';
}
}">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-medium mb-2" for="fileInput">
Upload Files
</label>
<div class="relative border-2 border-dashed border-gray-300 rounded-md p-4 text-center hover:border-gray-400 transition">
<input
type="file"
id="fileInput"
multiple
@change="handleFileChange"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
>
<p class="text-gray-500">Drag and drop files here or click to browse</p>
</div>
</div>
<div x-show="files.length > 0" class="space-y-2">
<h3 class="text-gray-700 font-medium">Selected Files:</h3>
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<template x-for="(file, index) in files" :key="index">
<li class="flex items-center justify-between p-3 hover:bg-gray-50">
<div>
<p x-text="file.name" class="text-sm text-gray-700"></p>
<p x-text="file.size" class="text-xs text-gray-500"></p>
</div>
<button
@click="removeFile(index)"
class="text-red-500 hover:text-red-700 text-sm"
>
Remove
</button>
</li>
</template>
</ul>
</div>
</div>