Introduction

Create an interactive and user-friendly multi-image upload component with Bootstrap 5! This gallery upload solution allows users to upload multiple images, preview them instantly, and even rearrange their order with drag-and-drop functionality. Perfect for e-commerce, portfolios, and admin dashboards.

Features

  • Upload Multiple Images
    Users can upload multiple images simultaneously with easy drag-and-drop or file selection.

  • Instant Preview
    View uploaded images instantly within a responsive grid layout.

  • Drag-and-Drop Sorting
    Rearrange images intuitively to customize the display order.

  • Remove Images
    Delete individual images with a simple click.

  • Customizable Options
    Configure file formats, maximum upload size, and grid styles easily.

  • Effect Preview

HTML Structure / Multi-Image Upload Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Image Upload Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
    <style>
        .img-preview {
            position: relative;
            margin: 10px;
            display: inline-block;
        }
        .img-preview img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .img-preview .btn-container {
            position: absolute;
            top: 5px;
            right: 5px;
            display: flex;
            gap: 5px;
        }
    </style>
</head>
<body>
<div class="container py-5">
    <h1 class="mb-4">Multi-Image Upload</h1>
    <form id="imageUploadForm">
        <div class="mb-3">
            <label for="imageInput" class="form-label">Upload Images</label>
            <input type="file" id="imageInput" class="form-control" multiple accept="image/*">
        </div>
        <div id="imagePreviewContainer" class="d-flex flex-wrap">
            <!-- Image previews will be appended here -->
        </div>
        <button type="submit" class="btn btn-primary mt-3">Submit</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        const imagePreviewContainer = $('#imagePreviewContainer');

        // Handle image input change
        $('#imageInput').on('change', function () {
            const files = Array.from(this.files);
            files.forEach(file => {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const imageHtml = `
                        <div class="img-preview" data-file-name="${file.name}">
                            <img src="${e.target.result}" alt="Preview">
                            <div class="btn-container">
                                <button type="button" class="btn btn-sm btn-danger delete-btn">Delete</button>
                                <button type="button" class="btn btn-sm btn-secondary move-left-btn">←</button>
                                <button type="button" class="btn btn-sm btn-secondary move-right-btn">→</button>
                            </div>
                        </div>`;
                    imagePreviewContainer.append(imageHtml);
                };
                reader.readAsDataURL(file);
            });
        });

        // Handle delete button
        imagePreviewContainer.on('click', '.delete-btn', function () {
            $(this).closest('.img-preview').remove();
        });

        // Handle move-left button
        imagePreviewContainer.on('click', '.move-left-btn', function () {
            const current = $(this).closest('.img-preview');
            current.insertBefore(current.prev());
        });

        // Handle move-right button
        imagePreviewContainer.on('click', '.move-right-btn', function () {
            const current = $(this).closest('.img-preview');
            current.insertAfter(current.next());
        });

        // Handle form submission
        $('#imageUploadForm').on('submit', function (e) {
            e.preventDefault();
            const formData = new FormData();

            // Add each image file to formData
            imagePreviewContainer.find('.img-preview').each(function () {
                const fileName = $(this).data('file-name');
                const file = Array.from($('#imageInput')[0].files).find(f => f.name === fileName);
                if (file) {
                    formData.append('images[]', file);
                }
            });

            // Submit via AJAX
            $.ajax({
                url: '/upload-images', // Replace with your backend endpoint
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    alert('Images uploaded successfully!');
                },
                error: function (err) {
                    alert('Error uploading images!');
                    console.error(err);
                }
            });
        });
    });
</script>
</body>
</html>

How It Works

  1. Upload Images: Users can upload multiple images using the file input or drag-and-drop functionality.

  2. Preview Thumbnails: Uploaded images are displayed as thumbnails in a responsive grid layout.

  3. Sort Images: Drag-and-drop functionality allows users to reorder images easily.

  4. Remove Images: Each thumbnail includes a delete button for removing unwanted images.

Call to Action

Boost your web application with this intuitive Bootstrap 5 gallery upload component. It’s flexible, easy to customize, and designed for seamless integration.

For assistance or custom development needs, feel free to contact us at 📧 tentech.ai.2023@gmail.com.