Drag and Drop file upload means you can upload the file by drag and drop. When you drag any image over the drag area, the file gets attached to the particular space. You can upload a particular file. The text "Drag & Drop to upload file" changes to "Close the upload file". Or when you click on the "Drag & Drop to upload file" button, the document file will open, you can select your file and you can upload the file.
In this program (Drag and Drop upload file), on the webpage, there is a box at the center of the webpage, in that box, there is an upload icon with the button below the icon with the text "Browse to upload file". By clicking on the button you can choose the file and click the open button to get file upload. It is used to attach and upload the file.
The source code of this Drag and Drop upload file using HTML, CSS & JavaScript is given below, you can copy the source code of this program. You can use this Drag and Drop upload file using HTML, CSS & JavaScript, you can take this code to the next level with your creativity.
Drag and Drop upload file using HTML, CSS & JavaScript [Source Code]
To make this website (Drag and Drop upload file using HTML, CSS & JavaScript), you need to create three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: -webkit-linear-gradient(to right, #F9D423, #e65c00);
background: linear-gradient(to right, #F9D423, #e65c00);
}
.drop-zone {
width: 500px;
height: 200px;
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: "Quicksand", sans-serif;
font-weight: 500;
font-size: 20px;
cursor: pointer;
color: #6990F2;
background: #202124;
border-radius: 15px;
}
.drop-zone--over {
border-style: solid;
}
.drop-zone__input {
display: none;
}
.drop-zone__thumb {
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
background-color: #cccccc;
background-size: cover;
position: relative;
}
.drop-zone__thumb::after {
content: attr(data-label);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 5px 0;
color: #ffffff;
background: rgba(0, 0, 0, 0.75);
font-size: 14px;
text-align: center;
}
.drop-zone__prompt i, .drop-zone span{
background: #e65c00;
background: -webkit-linear-gradient(to right, #F9D423, #e65c00);
background: linear-gradient(to right, #F9D423, #e65c00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
i{
font-size: 70px;
padding: 30px;
}
span{
font-size: 25px;
font-weight: 600;
}
.credit a{
text-decoration: none;
color: #fff;
}
.credit {
text-align: center;
padding: 10px;
}
document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
const dropZoneElement = inputElement.closest(".drop-zone");
dropZoneElement.addEventListener("click", (e) => {
inputElement.click();
});
inputElement.addEventListener("change", (e) => {
if (inputElement.files.length) {
updateThumbnail(dropZoneElement, inputElement.files[0]);
}
});
dropZoneElement.addEventListener("dragover", (e) => {
e.preventDefault();
dropZoneElement.classList.add("drop-zone--over");
});
["dragleave", "dragend"].forEach((type) => {
dropZoneElement.addEventListener(type, (e) => {
dropZoneElement.classList.remove("drop-zone--over");
});
});
dropZoneElement.addEventListener("drop", (e) => {
e.preventDefault();
if (e.dataTransfer.files.length) {
inputElement.files = e.dataTransfer.files;
updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
}
dropZoneElement.classList.remove("drop-zone--over");
});
});
/**
* Updates the thumbnail on a drop zone element.
*
* @param {HTMLElement} dropZoneElement
* @param {File} file
*/
function updateThumbnail(dropZoneElement, file) {
let thumbnailElement = dropZoneElement.querySelector(".drop-zone__thumb");
// First time - remove the prompt
if (dropZoneElement.querySelector(".drop-zone__prompt")) {
dropZoneElement.querySelector(".drop-zone__prompt").remove();
}
// First time - there is no thumbnail element, so lets create it
if (!thumbnailElement) {
thumbnailElement = document.createElement("div");
thumbnailElement.classList.add("drop-zone__thumb");
dropZoneElement.appendChild(thumbnailElement);
}
thumbnailElement.dataset.label = file.name;
// Show thumbnail for image files
if (file.type.startsWith("image/")) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
};
} else {
thumbnailElement.style.backgroundImage = null;
}
}
Thank you for reading our blog. If you face any problem in creating this Drag and Drop upload file using HTML, CSS & JavaScript, then contact us or comment us. We will try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team