Image Uploading Functionality using JS

In the vast landscape of web development, understanding how to create simple yet effective features is key. One such feature that adds interactivity to your website is the ability to upload images. In this blog, we’ll guide you through building a straightforward image upload functionality using HTML, CSS, and JavaScript.

Unveiling the Image Upload Magic

HTML Setup

Our HTML file defines the structure of our project. We have a container to display the uploaded image, an input field for file selection, and a label for triggering the file upload. Let’s take a closer look:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Upload</title>
  </head>
  <body>
    <div id="image-container">
      <img id="uploaded-image" src="#" alt="" />
    </div>
    <input
      type="file"
      id="upload-input"
      accept="image/*"
      onchange="displayImage()"
    />
    <label for="upload-input" id="upload-label">Upload Image</label>
  </body>
</html>

HTML

Styling with CSS

Our CSS file adds a touch of style to our project. We’ve chosen a simple, clean layout with a circular image container and a stylish upload label. Here’s a snippet of the styles:

body {
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  background-color: #1e1c27;
  color: white;
}

#image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #ddd;
  position: relative;
  margin-bottom: 20px;
}

#uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

#upload-input {
  display: none;
}

#upload-label {
  background-color: #3498db;
  color: #fff;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

#upload-label:hover {
  background-color: #2980b9;
}

CSS

Breathing Life into the Upload with JavaScript

JavaScript is where the magic happens. It handles the file input change event, reads the selected image file, and updates the image source dynamically. Let’s dive into the JavaScript code:

document
  .getElementById("upload-input")
  .addEventListener("change", displayImage);

function displayImage() {
  const input = document.getElementById("upload-input");
  const file = input.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function (event) {
      const imageDataUrl = event.target.result;
      updateImageSrc(imageDataUrl);
    };
    reader.onerror = function (error) {
      console.error("Error reading the file:", error);
    };
    reader.readAsDataURL(file);
  }
}

function updateImageSrc(src) {
  const uploadedImage = document.getElementById("uploaded-image");
  uploadedImage.src = src;
}

JavaScript

Understanding the Magic

HTML Structure:
- We create a container for the image, an input field for file selection, and a label for triggering the upload.
CSS Styling:
- The design is kept simple and clean with a circular image container and a stylish upload label.
JavaScript Functionality:
- The displayImage function is triggered when a file is selected.
- It reads the selected file, converts it to a data URL, and updates the image source.

Conclusion

Congratulations! You’ve just created a simple image upload feature for your website. Feel free to customize the styles or experiment with additional functionalities. This beginner-friendly guide empowers you to enhance your web development skills, one step at a time.

Happy Coding!