Image Upload Preview Tool | HTML, CSS & JavaScript

Image Upload Preview Tool with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #14

Project Overview

An Image Upload Preview Tool built using HTML, CSS, and JavaScript that allows users to preview images instantly before uploading them.
The project improves user experience by validating image files and displaying a real-time preview, ensuring users can confirm their selection before submission.

Key Features

Upload images directly from the local system.
Instant real-time image preview after selection.
Validates image file types to prevent incorrect uploads.
Displays a placeholder when no image is selected.
Clean, responsive, and user-friendly interface.
Easy to integrate into forms, profile uploads, or galleries.

HTML Code

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

  <div class="upload-container">
    <h2>Image Upload Preview</h2>

    <input type="file" id="imageInput" accept="image/*" />
    
    <div class="preview-box">
      <img id="previewImage" alt="Preview Image" />
      <p id="placeholder">No image selected</p>
    </div>
  </div>

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

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-container {
  background: #ffffff;
  width: 320px;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

h2 {
  margin-bottom: 15px;
}

input[type="file"] {
  margin-bottom: 15px;
}

.preview-box {
  width: 100%;
  height: 180px;
  border: 2px dashed #cbd5f5;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.preview-box img {
  max-width: 100%;
  max-height: 100%;
  display: none;
}

#placeholder {
  font-size: 14px;
  color: #6b7280;
}

Javascript Code

const imageInput = document.getElementById("imageInput");
const previewImage = document.getElementById("previewImage");
const placeholder = document.getElementById("placeholder");

imageInput.addEventListener("change", () => {
  const file = imageInput.files[0];

  if (!file) return;

  if (!file.type.startsWith("image/")) {
    alert("Please upload a valid image file");
    imageInput.value = "";
    return;
  }

  const reader = new FileReader();

  reader.onload = () => {
    previewImage.src = reader.result;
    previewImage.style.display = "block";
    placeholder.style.display = "none";
  };

  reader.readAsDataURL(file);
});