Profile Image Upload with HTML, CSS, and JavaScript @rayen-code

Rayen

Dive into the world of user interaction with our tutorial on creating Profile Image Upload functionality using HTML, CSS, and JavaScript. This feature allows users to personalize their profiles by uploading custom profile pictures.




Step 1: HTML Markup:

Begin by structuring your HTML to include the profile image upload components. Define the input field, preview area, and upload button, setting the stage for seamless profile image customization.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Image Tutorial</title>
    <!-- style.css link  -->
    <link rel="stylesheet" href="style.css">

    <!-- font awesome icon link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
        integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div class="card">

        <div class="image">
            <img src="default image.png" alt="" id="pro-image">
            <input type="file" accept="image/jpeg, image/png, image/jpg" id="input" class="input">
            <label for="input" class="upload">
                <i class="fa-solid fa-camera"></i>
            </label>
        </div>
        <div class="details">
            <h1>Jennu Rayen</h1>
            <p>@rayen-code</p>
            <div class="social">
                <i class="fa-brands fa-facebook"></i>
                <i class="fa-brands fa-linkedin"></i>
                <i class="fa-brands fa-instagram"></i>
            </div>
        </div>

    </div>

    <script src="main.js"></script>
</body>

</html>

Step 2: Styling with CSS:

Enhance the visual appeal of your profile image upload interface with CSS styles. Customize the layout, colors, and animations to create an intuitive and user-friendly experience.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eefade;
}

.card {
    position: relative;
    height: 400px;
    width: 300px;
    background: linear-gradient(135deg, #af8684, #6d3f3f);
    border-radius: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 10px 20px #1111115d;
    flex-direction: column;
    gap: 20px;
}

.card .image {
    width: 150px;
    height: 150px;
    border: 2px solid white;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card .image .upload {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #92929255;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: white;
    opacity: 0;
    cursor: pointer;
    border-radius: 50%;
}

.card .image:hover .upload {
    opacity: 1;
}

.input {
    display: none;
}

.details {
    color: white;
    text-align: center;

}

.details p {
    font-family: monospace;
}

.details .social {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    cursor: pointer;
    font-size: 1.2rem;
}

Step 3: Adding JavaScript Interaction:

Implement the logic for handling profile image uploads using JavaScript. Define functions to preview selected images, validate file types, and perform the upload operation.
//-------------------- Java Script --------------------//
let profileImage = document.getElementById("pro-image")
let input = document.getElementById("input")

input.addEventListener('change', () => {
    profileImage.src = URL.createObjectURL(input.files[0])
})

In conclusion, Profile Image Upload functionality adds a personal touch to user profiles, enhancing user engagement and customization options. With HTML, CSS, and JavaScript, you can empower users to personalize their online presence effortlessly.


0 Comments