OpenLayers Drag and Drop Files onto Map

HTML

<script src="http://www.w3.org/TR/FileAPI/"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Draw Features</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

  </head>
  <body>
    <div id="map" class="map"></div>
    <form class="form-inline">
      <label>Geometry type &nbsp;</label>
      <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
        <option value="None">None</option>
      </select>
    </form>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import Draw from 'ol/interaction/Draw.js';
      import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
      import {OSM, Vector as VectorSource} from 'ol/source.js';

      var raster = new TileLayer({
        source: new OSM()
      });

      var source = new VectorSource({wrapX: false});

      var vector = new VectorLayer({
        source: source
      });

      var map = new Map({
        layers: [raster, vector],
        target: 'map',
        view: new View({
          center: [-11000000, 4600000],
          zoom: 4
        })
      });

      var typeSelect = document.getElementById('type');

      var draw; // global so we can remove it later
      function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
          draw = new Draw({
            source: source,
            type: typeSelect.value
          });
          map.addInteraction(draw);
        }
      }


      /**
       * Handle...

CSS

#map {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }
 #message {
     max-width: 12em;
     text-align: center;
     position: fixed;
     padding: 1em 3em 1em 3em;
     border: 3px double black;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     border-radius: 15px;
     left: 20%;
     bottom: 20%;
     background-color: white;
     z-index: 2000;
 }
 #message > input[type="image"] {
     float: right;
     margin: -0.8em -2.6em 0 0;
 }
 #message.warn {
     color: #FF8C00;
     border-color: #FF8C00;
     font-weight: bold;
 }
 .olControlLayerSwitcher .layersDiv {
     background-Color: rgba(0, 60, 136, 0.5) !important;
     border: 1px solid #8B8B8B;
     border-radius: 5px 0px 0px 5px;
 }
 #wasndas {
     position: absolute;
     margin:auto;
     background: rgba(255, 255, 255, 0.7);
     border-radius:5px;
     z-index:10000;
     padding:5px;
     left:50px;
     border: 1px solid #8B8B8B;
 }
.olControlAttribution 
{
   bottom: 3px !important;
    
}
#attribution
{
    font-weight:bold;
    color:red;
}
#popupstring
{
    font-weight:normal;
}

JavaScript

var WGS84 = new OpenLayers.Projection("EPSG:4326");
 var Mercator = new OpenLayers.Projection("EPSG:900913");

 function $(aId) {
     return document.getElementById(aId);
 }

 function show(aEl) {
     aEl.style.display = '';
 }

 function hide(aEl) {
     aEl.style.display = 'none';
 }

 function init() {
     jQuery("#message").fadeOut(15000);

     this.map = new OpenLayers.Map('map');
     var baseLayer = new OpenLayers.Layer.OSM("");

     var viewLayer = new OpenLayers.Layer.Vector("ViewLayer", {
         projection: WGS84,
         styleMap: new OpenLayers.StyleMap({
             fillColor: "blue",
             strokeColor: "blue",
             strokeWidth: 3
         }),
         attribution: "<span id='attribution'>Example adapted from <a href='http://renevier.net/misc/mapfileapi.html' target='_blank'>renevier.net</a></span>"
     }  );
     
     map.addLayers([baseLayer, viewLayer]);
     
     selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
  
            map.addControl(selectControl);
            selectControl.activate();  
     
     
     var switcher = new OpenLayers.Control.LayerSwitcher();
     map.addControl(switcher);
     switcher.maximizeControl();
     var lonlat = new OpenLayers.LonLat(0, 0).transform(WGS84, Mercator);
     map.setCenter(lonlat, 3);
     if (!window.FileList || !window.FileReader) {
         $('message-content').textContent = 'You browser does not support local file api';
         $('message-content').className = 'warn';
         return;
     }

     function readerror() {
         $("message-content").textContent = "could not analyze file";
         $("message").className = "warn";
         show($("message"));
     }
     var handleFile = function (file) {
         var reader = new FileReader();
         reader.onload = function (evt) {
             if (evt.error) {
                 readerror();
                 return;
     ...