Utilizing Javascript to load a vast amount of data onto the browser, followed by initiating an XML

Looking for a solution to send XML requests containing values and content from files obtained by filling out an HTML form. With 5 large files, some exceeding 70 MB, I have implemented JavaScript functions to load file contents and assemble the XML request. However, upon clicking the button to load the files, the browser crashes (even though the files can be opened in the browser separately). It seems that the browser is struggling to handle such large files. Any suggestions on where the issue might lie and how to resolve it? Could it possibly be related to a timeout?

Below is the function used to load the files:

function getFile1Content() {
  var file = document.getElementById("file_zdr").files[0];
  if (file) {
    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onloadend = function(evt) {
        fileContent1 = evt.target.result;
        loaded++;
        console.log("FC1 " + fileContent1)
    }
    reader.onerror = function(evt) {
        console.log("ERROR FC1");
    }
  }
}

Appreciate any insights or suggestions!

Answer №1

Understanding the inner workings of browsers is crucial - they send requests to servers to handle the heavy lifting. Essentially, a request is made for specific tasks to be carried out by the server, which then returns the necessary data for user interaction.

From my perspective, it appears that the issue at hand may stem from an overload of files being loaded. It's important to question why these files are being opened by the browser. Are they being sent to the server or merely looked through? Regardless, dealing with numerous large files directly within your browser is not advisable.

If the goal is to search through the files, consider sending them to a server via a file upload form, using

<form><input accept="*" type="upload"></form>
. The server can then temporarily store the files, allowing for efficient searching before presenting the relevant information to the user.

I am more than willing to assist you in resolving this matter!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimizing Performance by Managing Data Loading in JavaScript Frameworks

I am new to JavaScript frameworks like React and Vue, and I have a question about their performance. Do websites built with React or Vue load all data at once? For example, if I have a page with many pictures, are they loaded when the component is used or ...

Tips on revealing concealed information when creating a printable format of an HTML document

I need to find a way to transform an HTML table into a PDF using JavaScript or jQuery. The challenge I'm facing is that the table contains hidden rows in the HTML, and I want these hidden rows to also appear in the generated PDF. Currently, when I co ...

Running PhantomJS using PHP

I'm having an issue with executing a command in my PHP script. Here's the command I am trying to run: shell_exec("phantomjs C:\sample\sample.js"); Surprisingly, it returns null after just a few seconds. I expected it to take longer sin ...

AJAX: Learn how to execute an AJAX call using a JavaScript function

Is there a method to determine (using developer tools like Chrome, Firefox, Opera, etc) the most recent function that triggers an AJAX call? This could be helpful for debugging web applications. Appreciate your help ...

My jQuery does not function correctly when I try to set a variable

Presented below is a crucial function: <script type='text/javascript'> $('#clicktogohome').live('click', function(){ history.pushState({}, '', this.href); popstate(this.href); return false; }); $('# ...

Utilizing Axios: Maintaining session continuity post successful authorization and including it in subsequent requests - testing in a browser-less environment

During this test scenario, I am sending an axios post request to an ExpressJS server that is running with passportjs local. The request includes a userId and password, and the server responds with a status code of 200, along with setting an appropriate hea ...

Unable to use href attribute as intended

HTML: <a id="Switch">Click here to switch</a> <a href="image1_large.png" class="mainA blade"> <img id="mainImage" src="image1.png"/></a> Javascript: <script> $(function() { $('#Switch').click(functio ...

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

What is the proper way to safely close the pg-promise connection in a node.js environment once all jest tests are completed?

I am facing a challenge in closing a PG-Promise database connection after running a function test in Jest. The database connection is initialized in one central location (db.js) and required in multiple places. In this scenario, it is being used by seed.j ...

Guide to modifying the class color using javascript

I am experiencing an issue with this particular code. I have successfully used getElementById, but when I try to use document.getElementsByClassName("hearts");, it does not work as expected. This is a snippet of my HTML code: status = 1; function change ...

The AngularJS function invoked itself within the structure

When working with my form, I encountered a problem involving custom input directives and text fields. In addition to these elements, there are buttons: one for adding a new input to the form which is linked to the function $scope.AddNewItem() in the contro ...

VueJS failing to pass parent data to child component

I'm fairly new to Vue Framework and I'm trying to figure out how to update a child component based on changes in the parent component's attributes. In the code snippet below, I've created a component that displays a greeting message bas ...

``Trouble with React Dropdown menu option selection"

I am encountering challenges with implementing a dropdown menu list for my react app. The issue at hand is that I have an API where one of the keys (key3) has values separated by commas that I wish to display in my dropdown list. The structure of the API ...

"I encountered an error while sorting lists in Vue 3 - the function this.lists.sort is not

Creating a Vue 3 front-end template: <template> <div class="container"> <router-link to="/user/create" class="btn btn-success mt-5 mb-5">Add New</router-link> <table class=" ...

After a successful transactWrite operation using DynamoDB.DocumentClient, the ItemCollectionMetrics remains unpopulated

Currently, I am utilizing a transactWrite instruction to interact with DynamoDb and I am expecting to receive the ItemCollectionMetrics. Even though changes have been made on the DynamoDb tables, the returned object is empty with {}. Does anyone have any ...

Align Headers to the Top Center in React Material-UI Datagrid

Is there a way to align the wrapped headers at the top-center using sx? I've tried the following code: const datagridSx = { '& .MuiDataGrid-columnHeaders': { height: 'unset !important', maxHeight: '168p ...

How about I visit the campgrounds/edit page for a change?

In this get route, the previous link it was redirected from is stored in the req.session object under returnTo. Once redirected, it goes to the /login and we are able to view the object in the console. router.get('/login', (req, res) => { ...

When React first fetches data and users move to chat with each other, the state value does not update

Recently, I started learning about React and Node.js as I dive into building a chat application. When a user is clicked for one-on-one chat, I retrieve records from the database using backend Node.js and also incorporate socket.io. In my Chat.js file: imp ...

"Jest test.each is throwing errors due to improper data types

Currently, I am utilizing Jest#test.each to execute some unit tests. Below is the code snippet: const invalidTestCases = [ [null, TypeError], [undefined, TypeError], [false, TypeError], [true, TypeError], ]; describe('normalizeNames', ...

What is the best way to save a JSON stream to a file in Node.js?

I am facing an issue with writing a complete JSON object to a file as it is received. Currently, I am using const file = fs.createWriteStream('./example.file'); var inputStream = JSON.parse(generatedData); fs.write(inputStream+"\n"); The d ...