Upload geojson file and add it as layer to Mapbox

I want to let the user upload a geojson file and add it as a layer to Mapbox.


<input type="file" name="uploadfile" id="file_loader">


var f = $('#file_loader')[0].files[0];

map.addSource('upload', {
    'type': 'geojson',
    'data': f

    'id': 'upload-file',
    'type': 'point',
    'source': 'upload',

But it doesn't work. It doesn't gives me an error, but no layer was added. I think the 'data' field don't accept file object, it needs json data.

I tried var data = JSON.stringify(f) but that gives me undefined.

I also tried to read the file into text first, and then JSON.stringify it:

const reader = new FileReader();
var data;
data = reader.result;
var data = JSON.stringify(data);
console.log(data)        //null

Also tried:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);    // A copy of my html page
        var myObj = JSON.parse(this.responseText);    //SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
xmlhttp.open("GET", f, true);