'Name of file not being present in div in html and javascript

I am working on something where you can drag and drop files into a place. It works so that, say i drag funny.html into there, it will create a div with the name of the file in there. I have tried that, but it does not present the name of the file

I used the following code:

<!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>
      </div>
      <script src="file.js"></script>

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
*{
    font-family:"Quicksand", sans-serif;
}

body{
    font-family:"Quicksand", sans-serif;
}
.dropfiles{
    max-width:1200px;
    height:530px;
    padding:25px;
    align-items:center;
    text-align:center;
    justify-content:center;
    font-family:"Quicksand", sans-serif;
    font-size:500;
    font-size:20px;
    cursor:pointer;
    color:#fffffff;
    border:4px dashed #d3afc6;
    border-radius:6px;
}

.dropfiles--over{
    border-style:solid;
}

.select{
    display:none;
}

.thumb{
    width:100%;
    border-radius:10px;
    height:100%;
    overflow:hidden;
    background-color: #cccccc;
    background-size: cover;
    position:relative;
}

.thumb::after{
    content: attr(data-label);
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding: 5px 0;
    color:white;
    background: rgba(0,0,0,0.75);
    font-size: 14px;
    text-align:center;
}

document.querySelectorAll(".select").forEach(inputElement =>{
    const dropElement = inputElement.closest(".dropfiles");
    
    dropElement.addEventListener("dragover", (e) => {
        e.preventDefault();
        dropElement.classList.add("dropfiles--over");
        
    });
    ["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);
    
}
    ThumbElement.datasetlabel = file.name;
}

I have Ctrl+Shift+I it and all it says in the div is ::after. Please Please help!

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