This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Drag-and-Drop

drag-and-drop 3 gpx 3 geojson 11 igc 3 kml 9 topojson 3 maptiler 26

#####

Extract styles from KML
Download samples:

Example of using the drag-and-drop interaction.

Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import GPX from 'ol/format/GPX.js';
    import GeoJSON from 'ol/format/GeoJSON.js';
    import IGC from 'ol/format/IGC.js';
    import KML from 'ol/format/KML.js';
    import TopoJSON from 'ol/format/TopoJSON.js';
    import DragAndDrop from 'ol/interaction/DragAndDrop.js';
    import TileLayer from 'ol/layer/Tile.js';
    import VectorLayer from 'ol/layer/Vector.js';
    import ImageTile from 'ol/source/ImageTile.js';
    import VectorSource from 'ol/source/Vector.js';

    const key = 'Get your own API key at https://www.maptiler.com/cloud/';
    const attributions =
      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
      '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

    const map = new Map({
      layers: [
        new TileLayer({
          source: new ImageTile({
            attributions: attributions,
            url:
              'https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=' + key,
            tileSize: 512,
            maxZoom: 20,
          }),
        }),
      ],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    const extractStyles = document.getElementById('extractstyles');
    let dragAndDropInteraction;

    function setInteraction() {
      if (dragAndDropInteraction) {
        map.removeInteraction(dragAndDropInteraction);
      }
      dragAndDropInteraction = new DragAndDrop({
        formatConstructors: [
          GPX,
          GeoJSON,
          IGC,
          // use constructed format to set options
          new KML({extractStyles: extractStyles.checked}),
          TopoJSON,
        ],
      });
      dragAndDropInteraction.on('addfeatures', function (event) {
        const vectorSource = new VectorSource({
          features: event.features,
        });
        map.addLayer(
          new VectorLayer({
            source: vectorSource,
          }),
        );
        map.getView().fit(vectorSource.getExtent());
      });
      map.addInteraction(dragAndDropInteraction);
    }
    setInteraction();

    extractStyles.addEventListener('change', setInteraction);

    const displayFeatureInfo = function (pixel) {
      const features = [];
      map.forEachFeatureAtPixel(pixel, function (feature) {
        features.push(feature);
      });
      if (features.length > 0) {
        const info = [];
        let i, ii;
        for (i = 0, ii = features.length; i < ii; ++i) {
          info.push(features[i].get('name'));
        }
        document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
      } else {
        document.getElementById('info').innerHTML = '&nbsp;';
      }
    };

    map.on('pointermove', function (evt) {
      if (evt.dragging) {
        return;
      }
      displayFeatureInfo(evt.pixel);
    });

    map.on('click', function (evt) {
      displayFeatureInfo(evt.pixel);
    });

    // Sample data downloads

    const link = document.getElementById('download');

    function download(fullpath, filename) {
      fetch(fullpath)
        .then(function (response) {
          return response.blob();
        })
        .then(function (blob) {
          link.href = URL.createObjectURL(blob);
          link.download = filename;
          link.click();
        });
    }

    document.getElementById('download-gpx').addEventListener('click', function () {
      download('data/gpx/fells_loop.gpx', 'fells_loop.gpx');
    });

    document
      .getElementById('download-geojson')
      .addEventListener('click', function () {
        download('data/geojson/roads-seoul.geojson', 'roads-seoul.geojson');
      });

    document.getElementById('download-igc').addEventListener('click', function () {
      download('data/igc/Ulrich-Prinz.igc', 'Ulrich-Prinz.igc');
    });

    document.getElementById('download-kml').addEventListener('click', function () {
      download('data/kml/states.kml', 'states.kml');
    });

    document
      .getElementById('download-topojson')
      .addEventListener('click', function () {
        download('data/topojson/fr-departments.json', 'fr-departments.json');
      });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Drag-and-Drop</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <div><label><input type="checkbox" id="extractstyles" checked /> Extract styles from KML</label></div>
        <br />
        <div>
          <a id="download" download></a>
          Download samples:&nbsp;&nbsp;
          <button id="download-gpx">GPX</button>
          &nbsp;
          <button id="download-geojson">GeoJSON</button>
          &nbsp;
          <button id="download-igc">IGC</button>
          &nbsp;
          <button id="download-kml">KML</button>
          &nbsp;
          <button id="download-topojson">TopoJSON</button>
        </div>
        <br />
        <div id="info">&nbsp;</div>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "drag-and-drop",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }