File API Drag And Drop Works

Working Loaded the file on drop and read it as an array buffer locally

by Ehsan Ziya

HTML

<div id="file"></div>

CSS

#file{
    width:200px;
    height:200px;
    border: 1px solid black;
    
}

JavaScript

var drop = document.getElementById('file');

drop.addEventListener("dragover",function(e){
    //prevents from loading the file in a new page
    e.preventDefault();
},false);
drop.addEventListener("drop",function(e){
    
    //prevents from loading the file in a new page
    e.preventDefault();
    
    //can be multiple files
    var file = e.dataTransfer.files[0];
    console.log(file);
    
    //resembles XML request with onload and read(send)
    var reader = new FileReader();
    reader.onload = function(e){
    var array = e.target.result;
        console.log(array);
        // have the ArrayBuffer ready, now you decode audiodata
    }
    reader.readAsArrayBuffer(file);
    
},false);