Drag and drop interaction error handling in OpenLayers

Question

I'm trying to handle errors when doing drag and drop interaction for GPX files in OpenLayers 6.4.3, like for example when file being dropped has wrong format.

I found out that in the case of parse error there is now way to catch the error and inform user about that. The only visible consequence of error is this error in the console (but only for some browsers), which obviously comes from XML parser:

XML5619: Incorrect document syntax. Line: 1, Column 1

I tried to hook on interaction's error event, but it's not triggered at all.

Here is the relevant code:

var dragAndDropInteraction = new ol.interaction.DragAndDrop({
  formatConstructors: [
    ol.format.GPX
  ]
});

var map = new ol.Map({
  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

dragAndDropInteraction.on('addfeatures', function(event) {
  var vectorSource = new ol.source.Vector({
    features: event.features
  });
  map.addLayer(new ol.layer.Vector({
    source: vectorSource,
    style: styleFunction
  }));
  map.getView().fit(
    vectorSource.getExtent(), {
      constrainResolution: false,
      padding: [20, 50, 20, 50]
    });
});

Is there a way to catch parse error and consequently inform user about that?

Answer 1

The interaction is designed to handle multiple formats and errors are to be expected until it finds a format which works. Some formats will throw an error if not caught while others fail silently, so if no format works which error would it return? For a single format where you you need specific error handling it is easy to add your own drag and drop

  map.getViewport().addEventListener('dragover', function(event) {
    event.preventDefault();
  });

  map.getViewport().addEventListener('drop', function(event) {
    event.preventDefault();
    const files = event.dataTransfer.files;
    for (let i = 0, ii = files.length; i < ii; ++i) {
      const reader = new FileReader();
      reader.onload = function(e) {
        const features = new ol.format.GPX().readFeatures(reader.result);
        ...
      };
      reader.readAsText(files.item(i));
    }
  });