Introduction

Looking for a lightweight and feature-rich avatar upload solution? This Bootstrap 5 avatar upload component enables users to upload, preview, and clear their profile images effortlessly. Designed for modern web applications, it is responsive, accessible, and easy to integrate.

Features

  • Upload Images
    Support for drag-and-drop or file selection for uploading avatars.

  • Preview Functionality
    Display the selected image instantly for user confirmation.

  • Clear Uploaded Images
    Option to reset the uploaded image back to the default placeholder.

  • Responsive Design
    Optimized for devices of all sizes, ensuring a consistent user experience.

  • Customizable Options
    Easily configure file formats, size limits, and default placeholder images.

  • Effect Preview

HTML Structure / Avatar Upload Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Avatar Upload Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .avatar-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            border: 3px solid #ddd;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="container py-4">
    <h1 class="mb-4">Upload Your Avatar</h1>
    <form id="avatarForm">
        <div class="mb-3">
            <label for="nickname" class="form-label">Nickname</label>
            <input type="text" id="nickname" name="nickname" class="form-control" required>
        </div>

        <div class="mb-3">
            <label for="avatar_file" class="form-label">Profile Picture</label>
            <div class="d-flex align-items-center">
                <img id="avatar_img" src="https://via.placeholder.com/100" alt="Avatar" class="avatar-img">
                <input type="file" id="avatar_file" name="avatar_file" class="form-control ms-3" accept="image/*">
            </div>
            <small class="form-text text-muted">Max file size: 5MB. Formats: JPG, PNG, GIF.</small>
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        let validUploadAvatar = null;

        // Preview avatar when a file is selected
        $("#avatar_file").change(function () {
            const file = this.files[0];
            if (file) {
                if (file.size > 5 * 1024 * 1024) { // Check file size (5MB)
                    alert("File size exceeds 5MB. Please select a smaller file.");
                    $(this).val('');
                    return;
                }
                validUploadAvatar = file;

                const reader = new FileReader();
                reader.onload = function (e) {
                    $("#avatar_img").attr("src", e.target.result);
                };
                reader.readAsDataURL(file);
            }
        });

        // Form validation and submission
        $("#avatarForm").submit(function (e) {
            e.preventDefault();

            const nickname = $("#nickname").val().trim();
            if (!nickname) {
                alert("Nickname is required.");
                return;
            }

            const formData = new FormData(this);
            if (!$("#avatar_file")[0].files.length && validUploadAvatar) {
                formData.set("avatar_file", validUploadAvatar);
            }

            $.ajax({
                url: "/api/upload_avatar",
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.success) {
                        alert("Avatar uploaded successfully!");
                        // Redirect or update UI as needed
                    } else {
                        alert("Upload failed. Please try again.");
                    }
                },
                error: function () {
                    alert("An error occurred. Please try again.");
                }
            });
        });
    });
</script>
</body>
</html>

How It Works

  1. Upload: Users can click the "Upload" button to browse for an image file or drag-and-drop it into the input field.

  2. Preview: Once an image is uploaded, the component displays a preview inside the circular image frame.

  3. Clear: Clicking the "Clear" button resets the preview to the default placeholder and clears the input field.

Use Cases

  • E-commerce Platforms
    Allow users to upload profile pictures for their accounts.

  • Social Media Applications
    Provide a seamless way to update avatars.

  • Admin Panels
    Offer profile customization for dashboard users.

Call to Action

Integrate this Bootstrap 5 avatar upload component into your web projects today! It’s lightweight, customizable, and designed to improve user experience. If you need help or have custom requirements, feel free to contact us at 📧 tentech.ai.2023@gmail.com.

For any issues or customization needs, feel free to reach out to us at 📧 tentech.ai.2023@gmail.com.