Image Upload Preview Tool | HTML, CSS & JavaScript

Image Upload Preview Tool with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #14

Project Overview

The Image Upload Preview Tool is a beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to select an image from their local device and preview it instantly on the webpage before uploading or submitting it. It uses JavaScript to detect the selected file and check whether it is a valid image. If the selected file is valid, the project uses the FileReader API to read the image and display it inside the preview area. However, if the user selects an invalid file type, the application displays an alert and clears the selected file.

This project is useful for beginners who want to learn how websites handle files selected by users. Additionally, it demonstrates file validation, event listeners, DOM manipulation, conditional statements, and real-time content updates.

Key Features

Image Upload: Users can select an image from their computer or mobile device using the file input. The application reads the selected file and prepares it for preview.
Instant Image Preview: After selecting a valid image, the application displays it immediately inside the preview area. Therefore, users can check the selected image without refreshing the webpage.
Image File Validation: JavaScript checks whether the selected file is an image before displaying it. This helps prevent unsupported file types from appearing in the preview area.
Invalid File Warning: If a user selects a file that is not an image, the application displays a warning message. As a result, users can select another valid file.
FileReader API: The project uses the FileReader API to read the selected image file. JavaScript then converts the file into a format that the browser can display.
Dynamic Preview Updates: Users can select a different image whenever they want to change their selection. The preview area updates automatically to display the newly selected image.
Placeholder Content: Before an image is selected, the preview area displays a placeholder message. Once the user chooses a valid image, JavaScript hides this message.
Clean and Simple Interface: The project uses a simple layout that keeps the file input and image preview easy to understand. Users can quickly select and view an image.
Responsive Design: The Image Upload Preview Tool can work across different screen sizes. Therefore, users can comfortably use the application on desktops, tablets, and mobile devices.
Easy to Extend: Developers can add more features such as image removal, drag-and-drop uploads, multiple image previews, and image size validation to expand the project.

What You'll Learn

Understand how HTML file inputs work.
Learn how users can select files from their devices.
Practice accessing selected files using JavaScript.
Understand how the change event detects file selection.
Learn how to validate file types.
Understand how the FileReader API works.
Practice using readAsDataURL() to read image files.
Learn how to dynamically update an image using JavaScript.
Practice showing and hiding HTML elements.
Understand how JavaScript creates real-time content previews.

HTML Code

HTML creates the basic structure of the Image Upload Preview Tool. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the application. The main content is placed inside the .upload-container, which holds the project heading, file input, and image preview area.

The <input> element with the ID imageInput allows users to select an image from their device. The accept="image/*" attribute helps users choose supported image files. The preview area contains an <img> element where JavaScript displays the selected image and a placeholder message that appears before an image is selected.

Finally, the script.js file is loaded at the bottom of the <body>. Therefore, JavaScript can access the required elements and handle image selection and preview functionality.

<!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

CSS controls the appearance and layout of the Image Upload Preview Tool. The body uses Flexbox to center the main application on the page, while the .upload-container creates a clean card-style interface with padding, rounded corners, and a shadow.

The preview area uses a fixed size and border to create a dedicated space for the selected image. The image uses max-width and max-height so it stays inside the preview area. Initially, the preview image remains hidden until the user selects a valid image.

* {
  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

JavaScript provides the main functionality of the Image Upload Preview Tool. First, it selects the file input, preview image, and placeholder text using document.getElementById(). Next, JavaScript adds a change event listener to the file input, which runs whenever the user selects a new file and when the event occurs, the code accesses the first selected file using imageInput.files[0]. If the user has not selected a file, the function stops. Otherwise, JavaScript checks whether the file type starts with "image/". If the selected file is not an image, the application displays an alert message and clears the file input.

When user selects a valid image, JavaScript creates a FileReader object. The FileReader reads the selected file as a data URL using readAsDataURL(). After the file finishes loading, the onload event assigns the image data to the src attribute of the preview image.

Finally, JavaScript displays the selected image and hides the placeholder message. As a result, users can preview their selected image instantly without refreshing the webpage.

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);
});