Drag and Drop Object details

Drag and Drop Object details

by Mandeep Singh

HTML

<input type="file" id="file1"/>

CSS

#file1{
    background-color:green;
    height : 180px;
    width: 180px
}

JavaScript

var target = document.getElementById("file1");

target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

target.addEventListener("drop", function(event) {

    // cancel default actions
    event.preventDefault();
    
    var i = 0,
        files = event.dataTransfer.files,
        len = files.length;
    
    for (; i < len; i++) {
        console.log(files[i]);
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
        console.log("Size: " + files[i].value);
    }

}, false);