Table of Contents
Introduction:
Embarking on the journey of creating the Simplest Images Uploader using HTML, CSS, and JavaScript is an excellent opportunity for coding enthusiasts to enhance their skills. This tutorial will guide you through the process of setting up a project that allows users to upload images through drag-and-drop or browsing.
By the end of this tutorial, you’ll have a functional image uploader with a clean and user-friendly interface. Users can either drag and drop images or click the designated area to browse and upload images effortlessly.
Steps to Create the Simplest Images Uploader using JavaScript:
Please follow this Step-by-Step Guide to Create and Setup the Simplest Images Uploader using JavaScript —
Begin by creating a new folder for the project. Inside this folder, create and set up three files:
index.htmlstyle.cssscript.js
Ensure the filenames and extensions match for consistency.
HTML Structure:
Open your index.html file and use the provided HTML code. This establishes the basic structure of your Images Uploader using JavaScript. The file input, drop zone, and file details areas are defined here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>simple Images Uploader (Drag & browse)</title>
</head>
<body>
<!-- Upload Area -->
<div id="uploadArea" class="upload-area">
<!-- Header -->
<div class="upload-area__header">
<h1 class="upload-area__title">Upload your file</h1>
<p class="upload-area__paragraph">
File should be an image
<strong class="upload-area__tooltip">
Like
<span class="upload-area__tooltip-data"></span> <!-- Data Will be Comes From Js -->
</strong>
</p>
</div>
<!-- End Header -->
<!-- Drop Zoon -->
<div id="dropZoon" class="upload-area__drop-zoon drop-zoon">
<span class="drop-zoon__icon">
<i class='bx bxs-file-image'></i>
</span>
<p class="drop-zoon__paragraph">Drop your file here or Click to browse</p>
<span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
<img src="" alt="Preview Image" id="previewImage" class="drop-zoon__preview-image" draggable="false">
<input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*">
</div>
<!-- End Drop Zoon -->
<!-- File Details -->
<div id="fileDetails" class="upload-area__file-details file-details">
<h3 class="file-details__title">Uploaded File</h3>
<div id="uploadedFile" class="uploaded-file">
<div class="uploaded-file__icon-container">
<i class='bx bxs-file-blank uploaded-file__icon'></i>
<span class="uploaded-file__icon-text"></span> <!-- Data Will be Comes From Js -->
</div>
<div id="uploadedFileInfo" class="uploaded-file__info">
<span class="uploaded-file__name">Proejct 1</span>
<span class="uploaded-file__counter">0%</span>
</div>
</div>
</div>
<!-- End File Details -->
</div>
</body>
</html>Styling with CSS:
Enhance the visual appeal of your image uploader by adding the provided CSS code to your style.css file. This code styles the layout, ensuring an aesthetically pleasing design.
/* General Styles */
* {
box-sizing: border-box;
}
:root {
--clr-white: rgb(255, 255, 255);
--clr-black: rgb(0, 0, 0);
--clr-light: rgb(245, 248, 255);
--clr-light-gray: rgb(196, 195, 196);
--clr-blue: rgb(63, 134, 255);
--clr-light-blue: rgb(171, 202, 255);
}
body {
margin: 0;
padding: 0;
background-color: var(--clr-light);
color: var(--clr-black);
font-family: 'Poppins', sans-serif;
font-size: 1.125rem;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* End General Styles */
/* Upload Area */
.upload-area {
width: 100%;
max-width: 25rem;
background-color: var(--clr-white);
box-shadow: 0 10px 60px rgb(218, 229, 255);
border: 2px solid var(--clr-light-blue);
border-radius: 24px;
padding: 2rem 1.875rem 5rem 1.875rem;
margin: 0.625rem;
text-align: center;
}
.upload-area--open {
/* Slid Down Animation */
animation: slidDown 500ms ease-in-out;
}
@keyframes slidDown {
from {
height: 28.125rem;
/* 450px */
}
to {
height: 35rem;
/* 560px */
}
}
.upload-area__title {
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 0.3125rem;
}
.upload-area__paragraph {
font-size: 0.9375rem;
color: var(--clr-light-gray);
margin-top: 0;
}
.upload-area__tooltip {
position: relative;
color: var(--clr-light-blue);
cursor: pointer;
transition: color 300ms ease-in-out;
}
.upload-area__tooltip:hover {
color: var(--clr-blue);
}
.upload-area__tooltip-data {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -125%);
min-width: max-content;
background-color: var(--clr-white);
color: var(--clr-blue);
border: 1px solid var(--clr-light-blue);
padding: 0.625rem 1.25rem;
font-weight: 500;
opacity: 0;
visibility: hidden;
transition: none 300ms ease-in-out;
transition-property: opacity, visibility;
}
.upload-area__tooltip:hover .upload-area__tooltip-data {
opacity: 1;
visibility: visible;
}
/* Drop Zoon */
.upload-area__drop-zoon {
position: relative;
height: 11.25rem;
/* 180px */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 2px dashed var(--clr-light-blue);
border-radius: 15px;
margin-top: 2.1875rem;
cursor: pointer;
transition: border-color 300ms ease-in-out;
}
.upload-area__drop-zoon:hover {
border-color: var(--clr-blue);
}
.drop-zoon__icon {
display: flex;
font-size: 3.75rem;
color: var(--clr-blue);
transition: opacity 300ms ease-in-out;
}
.drop-zoon__paragraph {
font-size: 0.9375rem;
color: var(--clr-light-gray);
margin: 0;
margin-top: 0.625rem;
transition: opacity 300ms ease-in-out;
}
.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
opacity: 0.7;
}
.drop-zoon__loading-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
color: var(--clr-light-blue);
z-index: 10;
}
.drop-zoon__preview-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 0.3125rem;
border-radius: 10px;
display: none;
z-index: 1000;
transition: opacity 300ms ease-in-out;
}
.drop-zoon:hover .drop-zoon__preview-image {
opacity: 0.8;
}
.drop-zoon__file-input {
display: none;
}
/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
border-color: var(--clr-blue);
}
.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
opacity: 0.7;
}
/* (drop-zoon--over) Modifier Class */
.drop-zoon--Uploaded {}
.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
display: none;
}
/* File Details Area */
.upload-area__file-details {
height: 0;
visibility: hidden;
opacity: 0;
text-align: left;
transition: none 500ms ease-in-out;
transition-property: opacity, visibility;
transition-delay: 500ms;
}
/* (duploaded-file--open) Modifier Class */
.file-details--open {
height: auto;
visibility: visible;
opacity: 1;
}
.file-details__title {
font-size: 1.125rem;
font-weight: 500;
color: var(--clr-light-gray);
}
/* Uploaded File */
.uploaded-file {
display: flex;
align-items: center;
padding: 0.625rem 0;
visibility: hidden;
opacity: 0;
transition: none 500ms ease-in-out;
transition-property: visibility, opacity;
}
/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
visibility: visible;
opacity: 1;
}
.uploaded-file__icon-container {
position: relative;
margin-right: 0.3125rem;
}
.uploaded-file__icon {
font-size: 3.4375rem;
color: var(--clr-blue);
}
.uploaded-file__icon-text {
position: absolute;
top: 1.5625rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.9375rem;
font-weight: 500;
color: var(--clr-white);
}
.uploaded-file__info {
position: relative;
top: -0.3125rem;
width: 100%;
display: flex;
justify-content: space-between;
}
.uploaded-file__info::before,
.uploaded-file__info::after {
content: '';
position: absolute;
bottom: -0.9375rem;
width: 0;
height: 0.5rem;
background-color: #ebf2ff;
border-radius: 0.625rem;
}
.uploaded-file__info::before {
width: 100%;
}
.uploaded-file__info::after {
width: 100%;
background-color: var(--clr-blue);
}
/* Progress Animation */
.uploaded-file__info--active::after {
animation: progressMove 800ms ease-in-out;
animation-delay: 300ms;
}
@keyframes progressMove {
from {
width: 0%;
background-color: transparent;
}
to {
width: 100%;
background-color: var(--clr-blue);
}
}
.uploaded-file__name {
width: 100%;
max-width: 6.25rem;
/* 100px */
display: inline-block;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uploaded-file__counter {
font-size: 1rem;
color: var(--clr-light-gray);
}JavaScript Magic:
The heart of your image uploader lies in the script.js file. Add the provided JavaScript code to handle events like drag-and-drop, file selection, and image preview. The code utilizes FileReader to read the selected image and dynamically updates the interface.
// Design By
// - https://dribbble.com/shots/13992184-File-Uploader-Drag-Drop
// Select Upload-Area
const uploadArea = document.querySelector('#uploadArea')
// Select Drop-Zoon Area
const dropZoon = document.querySelector('#dropZoon');
// Loading Text
const loadingText = document.querySelector('#loadingText');
// Slect File Input
const fileInput = document.querySelector('#fileInput');
// Select Preview Image
const previewImage = document.querySelector('#previewImage');
// File-Details Area
const fileDetails = document.querySelector('#fileDetails');
// Uploaded File
const uploadedFile = document.querySelector('#uploadedFile');
// Uploaded File Info
const uploadedFileInfo = document.querySelector('#uploadedFileInfo');
// Uploaded File Name
const uploadedFileName = document.querySelector('.uploaded-file__name');
// Uploaded File Icon
const uploadedFileIconText = document.querySelector('.uploaded-file__icon-text');
// Uploaded File Counter
const uploadedFileCounter = document.querySelector('.uploaded-file__counter');
// ToolTip Data
const toolTipData = document.querySelector('.upload-area__tooltip-data');
// Images Types
const imagesTypes = [
"jpeg",
"png",
"svg",
"gif"
];
// Append Images Types Array Inisde Tooltip Data
toolTipData.innerHTML = [...imagesTypes].join(', .');
// When (drop-zoon) has (dragover) Event
dropZoon.addEventListener('dragover', function (event) {
// Prevent Default Behavior
event.preventDefault();
// Add Class (drop-zoon--over) On (drop-zoon)
dropZoon.classList.add('drop-zoon--over');
});
// When (drop-zoon) has (dragleave) Event
dropZoon.addEventListener('dragleave', function (event) {
// Remove Class (drop-zoon--over) from (drop-zoon)
dropZoon.classList.remove('drop-zoon--over');
});
// When (drop-zoon) has (drop) Event
dropZoon.addEventListener('drop', function (event) {
// Prevent Default Behavior
event.preventDefault();
// Remove Class (drop-zoon--over) from (drop-zoon)
dropZoon.classList.remove('drop-zoon--over');
// Select The Dropped File
const file = event.dataTransfer.files[0];
// Call Function uploadFile(), And Send To Her The Dropped File :)
uploadFile(file);
});
// When (drop-zoon) has (click) Event
dropZoon.addEventListener('click', function (event) {
// Click The (fileInput)
fileInput.click();
});
// When (fileInput) has (change) Event
fileInput.addEventListener('change', function (event) {
// Select The Chosen File
const file = event.target.files[0];
// Call Function uploadFile(), And Send To Her The Chosen File :)
uploadFile(file);
});
// Upload File Function
function uploadFile(file) {
// FileReader()
const fileReader = new FileReader();
// File Type
const fileType = file.type;
// File Size
const fileSize = file.size;
// If File Is Passed from the (File Validation) Function
if (fileValidate(fileType, fileSize)) {
// Add Class (drop-zoon--Uploaded) on (drop-zoon)
dropZoon.classList.add('drop-zoon--Uploaded');
// Show Loading-text
loadingText.style.display = "block";
// Hide Preview Image
previewImage.style.display = 'none';
// Remove Class (uploaded-file--open) From (uploadedFile)
uploadedFile.classList.remove('uploaded-file--open');
// Remove Class (uploaded-file__info--active) from (uploadedFileInfo)
uploadedFileInfo.classList.remove('uploaded-file__info--active');
// After File Reader Loaded
fileReader.addEventListener('load', function () {
// After Half Second
setTimeout(function () {
// Add Class (upload-area--open) On (uploadArea)
uploadArea.classList.add('upload-area--open');
// Hide Loading-text (please-wait) Element
loadingText.style.display = "none";
// Show Preview Image
previewImage.style.display = 'block';
// Add Class (file-details--open) On (fileDetails)
fileDetails.classList.add('file-details--open');
// Add Class (uploaded-file--open) On (uploadedFile)
uploadedFile.classList.add('uploaded-file--open');
// Add Class (uploaded-file__info--active) On (uploadedFileInfo)
uploadedFileInfo.classList.add('uploaded-file__info--active');
}, 500); // 0.5s
// Add The (fileReader) Result Inside (previewImage) Source
previewImage.setAttribute('src', fileReader.result);
// Add File Name Inside Uploaded File Name
uploadedFileName.innerHTML = file.name;
// Call Function progressMove();
progressMove();
});
// Read (file) As Data Url
fileReader.readAsDataURL(file);
} else { // Else
this; // (this) Represent The fileValidate(fileType, fileSize) Function
};
};
// Progress Counter Increase Function
function progressMove() {
// Counter Start
let counter = 0;
// After 600ms
setTimeout(() => {
// Every 100ms
let counterIncrease = setInterval(() => {
// If (counter) is equle 100
if (counter === 100) {
// Stop (Counter Increase)
clearInterval(counterIncrease);
} else { // Else
// plus 10 on counter
counter = counter + 10;
// add (counter) vlaue inisde (uploadedFileCounter)
uploadedFileCounter.innerHTML = `${counter}%`
}
}, 100);
}, 600);
};
// Simple File Validate Function
function fileValidate(fileType, fileSize) {
// File Type Validation
let isImage = imagesTypes.filter((type) => fileType.indexOf(`image/${type}`) !== -1);
// If The Uploaded File Type Is 'jpeg'
if (isImage[0] === 'jpeg') {
// Add Inisde (uploadedFileIconText) The (jpg) Value
uploadedFileIconText.innerHTML = 'jpg';
} else { // else
// Add Inisde (uploadedFileIconText) The Uploaded File Type
uploadedFileIconText.innerHTML = isImage[0];
};
// If The Uploaded File Is An Image
if (isImage.length !== 0) {
// Check, If File Size Is 2MB or Less
if (fileSize <= 2000000) { // 2MB :)
return true;
} else { // Else File Size
return alert('Please Your File Should be 2 Megabytes or Less');
};
} else { // Else File Type
return alert('Please make sure to upload An Image File Type');
};
};
<!-- Code injected by live-server -->
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>Testing and Customization:
Test your uploader by uploading various images. Feel free to tweak parameters like maximum file size or accepted file types based on your project requirements.
Conclusion:
This brief tutorial taught you how to create the Simplest Images Uploader using HTML, CSS, and JavaScript. This project reinforces your coding skills and offers hands-on experience with file handling and DOM manipulation.
Feel free to experiment with the provided code, understanding its intricacies, and adapting it to suit your preferences. As you dive into this project, remember that coding is an exploration, an avenue to experiment, and a source of joy in building something meaningful.
For your convenience, the total source code of this “Simplest Accordion using HTML CSS JavaScript” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
