'How to create another div for the file after drag and drop files in HTML and JS

I am working on a place where you can upload files to somewhere via drag n' drop. When I drag a file into there, it will create a new div with that exact imformation. If it is an image, the div's background image will be that image and the name of the image will be presented. This is the code:

document.querySelectorAll(".select").forEach(inputElement =>{
    const dropElement = inputElement.closest(".dropfiles");
    
    dropElement.addEventListener("dragover", (e) => {
        e.preventDefault();
        dropElement.classList.add("dropfiles--over");
        
    });
    dropElement.addEventListener("click", e => {
        inputElement.click();
    });
    ["dragleave", "dragend"].forEach(type => {
            dropElement.addEventListener(type, (e) =>{
                e.preventDefault();
                dropElement.classList.remove("dropfiles--over");
        });
        });
    dropElement.addEventListener("drop", (e) =>{
        e.preventDefault();
        if(e.dataTransfer.files.length){
            inputElement.files= e.dataTransfer.files;
            updateThumbnail(dropElement, e.dataTransfer.files[0]);
        }
        dropElement.classList.remove("dropfiles--over");
    });
    })
    
function updateThumbnail(dropElement, file){
    console.log(dropElement);
    console.log(file);
    let ThumbElement = dropElement.querySelector(".thumb");
    
    
    if (dropElement.querySelector(".prompt")){
        dropElement.querySelector(".prompt").remove();
    }
    if(!ThumbElement){
        ThumbElement = document.createElement("div");
        ThumbElement.classList.add("thumb")
        dropElement.appendChild(ThumbElement);
    
}

    if(file.type.startsWith("image/")){
        const reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onload = () => {
            ThumbElement.style.backgroundImage = `url('${reader.result}')`
            ThumbElement.dataset.label = file.name;
        }
    }
    if(file.type.startsWith("text/html")){
        const reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onload = () => {
            ThumbElement.style.backgroundImage = `url('html.png')`
            ThumbElement.dataset.label = file.name;
            ThumbElement.style.width = '50%';
        }
    }
    if(file.type.startsWith("application/x-javascript")){
        ThumbElement.style.backgroundImage = `url('ohno.png')`
        ThumbElement.dataset.label = "We do not accept Javascript files as they could be harmful.";
    }
}

The only problem is, if I were to drag a different file in, it would just replace that original div and not create a new div for the file. How do I do it so that when I drag the file, it will create a new div and not replace an old one.?

HTML (just incase):

<!DOCTYPE html>
<html>
    <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" />
        <link href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet">
        <title>Document</title>
        <link rel="stylesheet" href="./file.css" />
        <script src="https://kit.fontawesome.com/2b5f6cfacf.js" crossorigin="anonymous"></script>
      </head>
      <body>
      <div class="dropfiles">
      <div class="prompt"
        <span class="prompt">Drop files in here, Or click to upload</span>
        <input type="file" name="select" class="select"></input>
      </div>
      <script src="file.js"></script>
javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions