Learn how to create a drag and drop file upload feature with HTML, CSS, and jQuery. This tutorial is designed for beginners and assumes no prior knowledge of HTML, CSS, or jQuery.
Table of Contents
Drag and drop files are a great way to make design work more intuitive for your users. With a few lines of jQuery code, you can do everything from creating a simple, one-page website to complex, multi-page designs with lots of interaction. In this article, you'll learn how to create drag-and-drop files that use jQuery so that you can get them up and running quickly!
Let's start making these amazing drag-and-drop files Using HTML, Pure CSS, and jQuery step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our drag and drop file upload feature.
The below is a piece of HTML code that creates a web page with a drag-and-drop file upload feature.
The <!DOCTYPE html> declaration at the beginning of the code tells the web browser which version of HTML is being used on the page.
The <html> element is the root element of the HTML document, and the lang attribute specifies the language of the page, in this case "en" for English.
The <head> section contains information about the document, such as the page title, character encoding, and a link to an external stylesheet.
The <body> section contains the content that will be displayed on the web page. In this case, there is a <div> element with class "container" that wraps around a <div> element with class "file-drop-area". The "file-drop-area" contains a message asking the user to choose or drop files, and an input field that allows the user to select multiple files for uploading. There is also a placeholder element with class "item-delete" that can be used to display a delete icon if needed.
Finally, the code includes two JavaScript files: one from a Content Delivery Network (CDN) that provides a library called jQuery, and another file called "script.js" that contains custom JavaScript code for the page.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of drag and drop file upload feature using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the drag and drop file upload feature is in place, the next step is to add styling to the drag and drop file upload feature using CSS.
The first section sets the height of the HTML and body elements to 100%, which is often done to ensure that elements inside them that are set to height: 100% will take up the full height of the viewport.
The second section styles the body element, setting a background image, font family, and text color.
The third section styles a container element that will hold the file drop area. It sets the height to 100%, displays the element as a flex container with center-aligned items, and adds padding and margin of 0 to remove any default spacing.
The fourth section styles the file drop area itself. It sets the width to a fixed size of 350 pixels, but also allows it to grow to the full width of its parent container. It adds padding and a box shadow for a three-dimensional look, and sets a transition effect for when the element is activated.
The fifth section styles the fake upload button that will be displayed inside the drop area. It sets its background color, border radius, and padding, and aligns it to the left of the drop area. It also sets its font size and text to uppercase.
The sixth section styles the file message that will be displayed inside the drop area. It sets the font size, weight, and color, and uses white-space: nowrap and text-overflow: ellipsis to ensure that the message is not too wide for the drop area.
The seventh section styles the delete button that will be displayed next to each file that is uploaded. It sets its position to absolute and aligns it to the right of the file message. It sets its width and height to 18 pixels, and adds a background image that is a small SVG of a trash can. It also sets a transition effect for when the delete button is hovered over.
This will give our drag and drop file upload feature an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
html, body {
height: 100%;
}
body {
background-image: linear-gradient( 102.7deg, rgba(253,218,255,1) 8.2%, rgba(223,173,252,1) 19.6%, rgba(173,205,252,1) 36.8%, rgba(173,252,244,1) 73.2%, rgba(202,248,208,1) 90.9% );
color: #D7D7EF;
font-family: sans-serif;
}
.container{
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.file-drop-area {
position: relative;
display: flex;
align-items: center;
width: 350px;
max-width: 100%;
padding: 25px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0,0,0,.1);
transition: .3s;
}
.file-drop-area.is-active {
background-color: #1a1a1a;
}
.fake-btn {
flex-shrink: 0;
background-color: #9699b3;
border-radius: 3px;
padding: 8px 15px;
margin-right: 10px;
font-size: 12px;
text-transform: uppercase;
}
.file-msg {
color: #9699b3;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item-delete {
display: none;
position: absolute;
right: 10px;
width: 18px;
height: 18px;
cursor: pointer;
}
.item-delete:before {
content: "";
position: absolute;
left: 0;
transition: .3s;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-size: cover;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%23bac1cb' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.5 438.5'%3e%3cpath d='M417.7 75.7A8.9 8.9 0 00411 73H323l-20-47.7c-2.8-7-8-13-15.4-18S272.5 0 264.9 0h-91.3C166 0 158.5 2.5 151 7.4c-7.4 5-12.5 11-15.4 18l-20 47.7H27.4a9 9 0 00-6.6 2.6 9 9 0 00-2.5 6.5v18.3c0 2.7.8 4.8 2.5 6.6a8.9 8.9 0 006.6 2.5h27.4v271.8c0 15.8 4.5 29.3 13.4 40.4a40.2 40.2 0 0032.3 16.7H338c12.6 0 23.4-5.7 32.3-17.2a64.8 64.8 0 0013.4-41V109.6h27.4c2.7 0 4.9-.8 6.6-2.5a8.9 8.9 0 002.6-6.6V82.2a9 9 0 00-2.6-6.5zm-248.4-36a8 8 0 014.9-3.2h90.5a8 8 0 014.8 3.2L283.2 73H155.3l14-33.4zm177.9 340.6a32.4 32.4 0 01-6.2 19.3c-1.4 1.6-2.4 2.4-3 2.4H100.5c-.6 0-1.6-.8-3-2.4a32.5 32.5 0 01-6.1-19.3V109.6h255.8v270.7z'/%3e%3cpath d='M137 347.2h18.3c2.7 0 4.9-.9 6.6-2.6a9 9 0 002.5-6.6V173.6a9 9 0 00-2.5-6.6 8.9 8.9 0 00-6.6-2.6H137c-2.6 0-4.8.9-6.5 2.6a8.9 8.9 0 00-2.6 6.6V338c0 2.7.9 4.9 2.6 6.6a8.9 8.9 0 006.5 2.6zM210.1 347.2h18.3a8.9 8.9 0 009.1-9.1V173.5c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a8.9 8.9 0 00-9.1 9.1V338a8.9 8.9 0 009.1 9.1zM283.2 347.2h18.3c2.7 0 4.8-.9 6.6-2.6a8.9 8.9 0 002.5-6.6V173.6c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a9 9 0 00-6.6 2.6 8.9 8.9 0 00-2.5 6.6V338a9 9 0 002.5 6.6 9 9 0 006.6 2.6z'/%3e%3c/svg%3e");
}
.item-delete:after {
content: "";
position: absolute;
opacity: 0;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%) scale(0);
background-color: #f3dbff;
border-radius: 50%;
transition: .3s;
}
.item-delete:hover:after {
transform: translate(-50%, -50%) scale(2.2);
opacity: 1;
}
.item-delete:hover:before {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%234f555f' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 438.5 438.5'%3e%3cpath d='M417.7 75.7A8.9 8.9 0 00411 73H323l-20-47.7c-2.8-7-8-13-15.4-18S272.5 0 264.9 0h-91.3C166 0 158.5 2.5 151 7.4c-7.4 5-12.5 11-15.4 18l-20 47.7H27.4a9 9 0 00-6.6 2.6 9 9 0 00-2.5 6.5v18.3c0 2.7.8 4.8 2.5 6.6a8.9 8.9 0 006.6 2.5h27.4v271.8c0 15.8 4.5 29.3 13.4 40.4a40.2 40.2 0 0032.3 16.7H338c12.6 0 23.4-5.7 32.3-17.2a64.8 64.8 0 0013.4-41V109.6h27.4c2.7 0 4.9-.8 6.6-2.5a8.9 8.9 0 002.6-6.6V82.2a9 9 0 00-2.6-6.5zm-248.4-36a8 8 0 014.9-3.2h90.5a8 8 0 014.8 3.2L283.2 73H155.3l14-33.4zm177.9 340.6a32.4 32.4 0 01-6.2 19.3c-1.4 1.6-2.4 2.4-3 2.4H100.5c-.6 0-1.6-.8-3-2.4a32.5 32.5 0 01-6.1-19.3V109.6h255.8v270.7z'/%3e%3cpath d='M137 347.2h18.3c2.7 0 4.9-.9 6.6-2.6a9 9 0 002.5-6.6V173.6a9 9 0 00-2.5-6.6 8.9 8.9 0 00-6.6-2.6H137c-2.6 0-4.8.9-6.5 2.6a8.9 8.9 0 00-2.6 6.6V338c0 2.7.9 4.9 2.6 6.6a8.9 8.9 0 006.5 2.6zM210.1 347.2h18.3a8.9 8.9 0 009.1-9.1V173.5c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a8.9 8.9 0 00-9.1 9.1V338a8.9 8.9 0 009.1 9.1zM283.2 347.2h18.3c2.7 0 4.8-.9 6.6-2.6a8.9 8.9 0 002.5-6.6V173.6c0-2.7-.8-4.9-2.5-6.6a8.9 8.9 0 00-6.6-2.6h-18.3a9 9 0 00-6.6 2.6 8.9 8.9 0 00-2.5 6.6V338a9 9 0 002.5 6.6 9 9 0 006.6 2.6z'/%3e%3c/svg%3e");
}
.file-input {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
cursor: pointer;
opacity: 0;
}
.file-input:focus {
outline: none;
} Step 3 (JavaScript Code):
Finally, we will add the drag and drop functionality to our container element. We will add the below code to our container element.
Here's a breakdown of what the code does:
The first three lines of the code define three variables, $fileInput, $droparea, and $delete, which store references to three different HTML elements on the page. These elements are selected using jQuery selectors.
The next few lines of the code use the $fileInput variable to attach event listeners to the file input field. Specifically, the code listens for the 'dragenter', 'focus', and 'click' events, and when any of these events are triggered, the code adds a CSS class, 'is-active', to the $droparea element.
The next set of event listeners listens for the 'dragleave', 'blur', and 'drop' events on the $fileInput element. When any of these events are triggered, the 'is-active' class is removed from the $droparea element.
The next set of event listeners listens for the 'change' event on the $fileInput element. When a file is selected, the code checks how many files were selected, and updates the text content of the element immediately preceding the $fileInput element to reflect the number of files selected. If only one file was selected, the file name is displayed. If no files were selected, the default text is displayed. If multiple files were selected, the number of files is displayed.
The last event listener listens for a 'click' event on the $delete element. When this event is triggered, the code clears the file input field, resets the text content of the element immediately preceding the $fileInput element to the default text, and hides the $delete element.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const $fileInput = $('.file-input');
const $droparea = $('.file-drop-area');
const $delete = $('.item-delete');
$fileInput.on('dragenter focus click', function () {
$droparea.addClass('is-active');
});
$fileInput.on('dragleave blur drop', function () {
$droparea.removeClass('is-active');
});
$fileInput.on('change', function () {
let filesCount = $(this)[0].files.length;
let $textContainer = $(this).prev();
if (filesCount === 1) {
let fileName = $(this).val().split('\\').pop();
$textContainer.text(fileName);
$('.item-delete').css('display', 'inline-block');
} else if (filesCount === 0) {
$textContainer.text('or drop files here');
$('.item-delete').css('display', 'none');
} else {
$textContainer.text(filesCount + ' files selected');
$('.item-delete').css('display', 'inline-block');
}
});
$delete.on('click', function () {
$('.file-input').val(null);
$('.file-msg').text('or drop files here');
$('.item-delete').css('display', 'none');
});Final Output:
Conclusion:
In this tutorial, we have shown you how to create a drag and drop file upload feature using HTML, CSS, and jQuery. We hope that this tutorial has been helpful and that you can use this feature to enhance the user experience of your website. Remember to test your website thoroughly before launching it to ensure that the feature works correctly. If you have any questions or comments, please leave them in the comment section below.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
