<!DOCTYPE html>
<!-- --------------------- Created By InCoder --------------------- -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag or Drop</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <div class="dragOrDropContainer">
        <div class="icon"><i class="fa-solid fa-cloud-arrow-up"></i></div>
        <div class="header">Drag & Drop to Upload File</div>
        <span>OR</span><br/>
        <button class="browseFile">Browse File</button>
        <input type="file" id="fileInput" hidden>
    </div>

    <script src="script.js"></script>
</body>
</html>
/* --------------------- Created By InCoder --------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

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

.dragOrDropContainer{
    color: #fff;
    margin: 1.2rem;
    padding: 1.2rem;
    overflow: hidden;
    text-align: center;
    max-height: 18rem;
    border-radius: .4rem;
    border: 3px dashed #fff;
    width: clamp(18rem, 65vw, 25rem);
}

.dragOrDropContainer img {
    width: 100%;
    height: 100%;
}

.dragOrDropContainer .icon {
    font-size: 5rem;
}

.dragOrDropContainer.uploaded {
    padding: 0;
    max-height: 13.5rem;
}

.dragOrDropContainer.drag {
    border: 3px solid #fff;
}

.dragOrDropContainer.drag .icon {
    animation: upload 1s infinite linear alternate;
}

@keyframes upload {
    0%{
        transform: translateY(0rem);
    }
    100%{
        transform: translateY(-1rem);
    }
}

.dragOrDropContainer .browseFile {
    width: 8rem;
    height: 2rem;
    color: #fff;
    cursor: pointer;
    margin-top: .6rem;
    border-radius: .4rem;
    border: 2px solid #fff;
    background-color: transparent;
    transition: all .2s ease-in-out;
}

.dragOrDropContainer .browseFile:hover {
    color: #de5d60;
    background-color: #fff;
}
// --------------------- Created By InCoder ---------------------

let dragOrDropContainer = document.querySelector('.dragOrDropContainer')
dragBoxText = document.querySelector('.dragOrDropContainer .header')
browseFile = document.querySelector('.browseFile')
fileInput = document.querySelector('#fileInput')

let file

fileInput.addEventListener('change', () => {
    file = fileInput.files[0];
    dragOrDropContainer.classList.add("drag")
    uploadFile()
})

const uploadFile = () => {
    let fileType = file.type;
    dragOrDropContainer.style.cursor = 'progress'
    dragBoxText.innerText = 'Uploading file, Please Wait...'
    let validExt = ["image/jpeg", "image/jpg", "image/png"];
    if (validExt.includes(fileType)) {
        let fileReader = new FileReader()
        fileReader.onload = () => {
            let fileURL = fileReader.result
            dragOrDropContainer.classList.add('uploaded')
            let imageTag = `<img src="${fileURL}" alt="image">`
            dragOrDropContainer.innerHTML = imageTag
            dragOrDropContainer.style.cursor = 'auto'
        }
        fileReader.readAsDataURL(file)
    } else {
        dragOrDropContainer.classList.remove("drag")
        dragBoxText.innerText = "Drag & Drop to Upload File"
        alert("This File is nat valid. Please choose another file and try again.")
    }
}

dragOrDropContainer.addEventListener('dragover', (e) => {
    e.preventDefault()
    dragOrDropContainer.classList.add('drag')
    dragBoxText.innerText = 'Release to Upload File'
})

dragOrDropContainer.addEventListener('dragleave', (e) => {
    dragOrDropContainer.classList.remove('drag')
    dragBoxText.innerText = 'Drag & Drop to Upload File'
})

dragOrDropContainer.addEventListener('drop', (e) => {
    e.preventDefault()
    file = e.dataTransfer.files[0];
    uploadFile()
})

browseFile.addEventListener('click', () => {
    fileInput.click()
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.