I created a website where you can import an XML file and then read it out. It works perfectly fine for most files but I tried using an XML file with 730MB and it doesn't work anymore. I don't seem to be getting any errors on the console, but if I for example use this code,

numberOfReports = xmlDoc.getElementsByTagName("DailyReport").length;

I always get 0 even though it should be far more than that, since the XML files definetely contains multiple <DailyReport> elements. My function to import and parse the files looks like this:

// Function to import and serialize the XML file
function import_XML() {
    var input = document.createElement('input');
    input.type = 'file';

    input.onchange = e => {

        // getting a hold of the file reference
        file = e.target.files[0];

        // setting up the reader
        var reader = new FileReader();
        reader.readAsText(file, 'UTF-8');

        // Tell the reader what to do when it's done reading
        reader.onload = readerEvent => {
            content = readerEvent.target.result;
            const parser = new DOMParser();
            xmlDoc = parser.parseFromString(content, "application/xml");
            console.log(xmlDoc.documentElement.nodeName == "parsererror" ? "Error while parsing XML File" : xmlDoc.documentElement.nodeName);
            console.log("content: " + content);

            // Number of reports in the XML file
            numberOfReports = xmlDoc.getElementsByTagName("DailyReport").length;
            console.log("number of daily reports: " + numberOfReports);
            updateTable();

        }
    }
    input.click();
}

The content I get from content = readerEvent.target.result; in the console is also just empty:

I'm not sure if it's because the file is too large, but the XML file should not have any malformations. Can anyone help me with this problem? Would really appreciate any help!