Collect external geojson from user and pass to L.GeoJSON.AJAX()

Question

I am aware that I can use leafet ajax to add an external geojson to a leaflet map like such...

var geojsonLayer = new L.GeoJSON.AJAX('c:/data/map/sample.geojson');       
geojsonLayer.addTo(map);

How instead can I collect the external geojson path from the user and pass to the L.GeoJSON.AJAX() argument?

I can use <input type="file"/> (or similar) to collect path from user. But how do I extend so that the user supplies the path such that L.GeoJSON.AJAX('../some/path/provided/by/user/geojson.geojson')

Working codepen.

EDIT: Working Solution

HTML

<li>
    <input id="upload" type="file"/>
    <a href="" data-toggle="collapse" data-target=".navbar-collapse.in" id="upload_link">                           
    <i class="fa fa-upload"></i>&nbsp;&nbsp;Import Geojson</a>
</li>

CSS

#upload_link{
    text-decoration:none;
}
#upload{
    display:none
}

JS

$(function(){
$("#upload_link").on('click', function(e){
    e.preventDefault();
    $("#upload:hidden").trigger('click');
});
});

document.getElementById('upload').addEventListener("change", function (evt) {
  var file = evt.target.files[0], // Read first file for this example.
      reader = new FileReader();

  reader.onload = function (e) {
    var fileText = e.target.result,
        fileData = JSON.parse(fileText),
        group = L.geoJson(fileData).addTo(map);

    map.fitBounds(group.getBounds());
  }

  reader.readAsText(file);
});

Answer 1

Your "working" Pen has unassigned qom variable, and L.GeoJSON.AJAX('#loadButton') is definitely not going to work, as '#loadButton' URL will not provide a valid JSON data.

The thing you must understand is that AJAX is made to retrieve network resources. Until some point it was possible to use it to read local data (on your file system), only if the page was open from your file system as well. But Chrome now blocks even that. Firefox may still allow it.

Now if you want to let the user load his/her own local file, you should use instead HTML5 File API. You will find plenty resources on the net for that, e.g. https://www.html5rocks.com/en/tutorials/file/dndfiles/

When the file input changes, you retrieve the file and feed it into a FileReader (readAsText). Then parse as JSON, and finally feed the JSON object to L.geoJSON factory. No need for Leaflet GeoJSON AJAX plugin.

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

document.getElementById("fileInput").addEventListener("change", function (evt) {
  var file = evt.target.files[0], // Read first file for this example.
      reader = new FileReader();

  reader.onload = function (e) {
    var fileText = e.target.result,
        fileData = JSON.parse(fileText),
        group = L.geoJSON(fileData).addTo(map);

    map.fitBounds(group.getBounds());
  }

  reader.readAsText(file);
});

A "working" pen: http://codepen.io/anon/pen/RppzvO