Drag & Drop File Uploader

Drag and drop files with visual feedback and validation

Drag and drop files here, or click to select

Code

<div x-data="{ files: [], dragging: false }">
    <div @drop.prevent="
            dragging = false;
            const droppedFiles = Array.from($event.dataTransfer.files);
            files = droppedFiles.map(f => ({ name: f.name, size: (f.size / 1024).toFixed(2) + ' KB' }));
        "
        @dragover.prevent="dragging = true"
        @dragleave.prevent="dragging = false"
        :class="dragging ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600'"
        class="border-2 border-dashed rounded-lg p-8 text-center transition">
        <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-4v8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Drag and drop files here, or click to select</p>
    </div>
    <ul x-show="files.length > 0" class="mt-4 space-y-2">
        <template x-for="file in files" :key="file.name">
            <li class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700 rounded">
                <span class="text-sm" x-text="file.name"></span>
                <span class="text-xs text-gray-500" x-text="file.size"></span>
            </li>
        </template>
    </ul>
</div>

Drag & Drop File Uploader

Drag and drop files with visual feedback and validation

Drag and drop files here, or click to select

Code

<div x-data="{ files: [], dragging: false }">
    <div &#64;drop.prevent="
            dragging = false;
            const droppedFiles = Array.from($event.dataTransfer.files);
            files = droppedFiles.map(f => ({ name: f.name, size: (f.size / 1024).toFixed(2) + &#39; KB&#39; }));
        "
        &#64;dragover.prevent="dragging = true"
        &#64;dragleave.prevent="dragging = false"
        :class="dragging ? &#39;border-blue-500 bg-blue-50 dark:bg-blue-900/20&#39; : &#39;border-gray-300 dark:border-gray-600&#39;"
        class="border-2 border-dashed rounded-lg p-8 text-center transition">
        <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-4v8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Drag and drop files here, or click to select</p>
    </div>
    <ul x-show="files.length > 0" class="mt-4 space-y-2">
        <template x-for="file in files" :key="file.name">
            <li class="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700 rounded">
                <span class="text-sm" x-text="file.name"></span>
                <span class="text-xs text-gray-500" x-text="file.size"></span>
            </li>
        </template>
    </ul>
</div>

Multiple File Upload with Progress

Upload multiple files with individual progress bars

Code

<div x-data="{ 
    files: [],
    addFiles(event) {
        const newFiles = Array.from(event.target.files).map(f => ({
            name: f.name,
            size: (f.size / 1024).toFixed(2) + ' KB',
            progress: 0
        }));
        this.files = [...this.files, ...newFiles];
        this.uploadFiles();
    },
    uploadFiles() {
        this.files.forEach((file, index) => {
            const interval = setInterval(() => {
                if (file.progress < 100) {
                    file.progress += 10;
                } else {
                    clearInterval(interval);
                }
            }, 200);
        });
    }
}">
    <input type="file" multiple @change="addFiles($event)" class="block w-full text-sm">
    <div x-show="files.length > 0" class="mt-4 space-y-3">
        <template x-for="(file, index) in files" :key="index">
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded">
                <div class="flex justify-between mb-2">
                    <span class="text-sm font-medium" x-text="file.name"></span>
                    <span class="text-xs text-gray-500" x-text="file.size"></span>
                </div>
                <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                    <div class="bg-blue-600 h-2 rounded-full transition-all" :style="`width: ${file.progress}%`"></div>
                </div>
            </div>
        </template>
    </div>
</div>

Image Gallery with Lightbox

Grid gallery with modal lightbox for viewing images

Code

<div x-data="{ 
    lightbox: false, 
    currentImage: &#39;&#39;,
    images: [
        &#39;https://picsum.photos/400/300?random=1&#39;,
        &#39;https://picsum.photos/400/300?random=2&#39;,
        &#39;https://picsum.photos/400/300?random=3&#39;,
        &#39;https://picsum.photos/400/300?random=4&#39;
    ]
}">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <template x-for="(image, index) in images" :key="index">
            <img :src="image" &#64;click="lightbox = true; currentImage = image" 
                class="w-full h-32 object-cover rounded-lg cursor-pointer hover:opacity-75 transition">
        </template>
    </div>
    
    <div x-show="lightbox" &#64;click.self="lightbox = false"
        class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50">
        <button &#64;click="lightbox = false" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
        <img :src="currentImage" class="max-w-4xl max-h-screen">
    </div>
</div>