javascript - Browser getting stuck to upload large files

Question

I am using basic javascript and trying to upload a file appx 500Mb, but my browser is getting stuck. Below is my javascript code

main.js

'use strict';

var singleUploadForm = document.querySelector('#singleUploadForm');
var singleFileUploadInput = document.querySelector('#singleFileUploadInput');
var singleFileUploadError = document.querySelector('#singleFileUploadError');
var singleFileUploadSuccess = document.querySelector('#singleFileUploadSuccess');

var multipleUploadForm = document.querySelector('#multipleUploadForm');
var multipleFileUploadInput = document.querySelector('#multipleFileUploadInput');
var multipleFileUploadError = document.querySelector('#multipleFileUploadError');
var multipleFileUploadSuccess = document.querySelector('#multipleFileUploadSuccess');

var asyncMltipleUploadForm = document.querySelector('#asyncMltipleUploadForm');
var asyncMultipleFileUploadInput = document.querySelector('#asyncMltipleUploadInput');
var asyncMultipleFileUploadError = document.querySelector('#asyncMultipleFileUploadError');
var asyncMultipleFileUploadSuccess = document.querySelector('#asyncMultipleFileUploadSuccess');
    
function uploadSingleFile(file) {
    var formData = new FormData();
    formData.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost:8080/uploadFile");

    xhr.onload = function() {
        console.log(xhr.responseText);
        // var response = JSON.parse(xhr.responseText);
        if(xhr.status == 200) {
            singleFileUploadError.style.display = "none";
            // singleFileUploadSuccess.innerHTML = "<p>File Uploaded Successfully.</p><p>DownloadUrl : <a href='" + response.fileDownloadUri + "' target='_blank'>" + response.fileDownloadUri + "</a></p>";
            singleFileUploadSuccess.style.display = "block";
        } else {
            singleFileUploadSuccess.style.display = "none";
            singleFileUploadError.innerHTML = (response && response.message) || "Some Error Occurred";
        }
    }

    xhr.send(formData);
}

function resolveAfter2Seconds(file) {
  return new Promise(resolve => {
    // setTimeout(() => {
      resolve(uploadSingleFile(file));
    // }, null);
  } );
}

async function asynchUploadMultipleFiles(files) {
    var formData = new FormData();
    for(var index = 0; index < files.length; index++) {
        // formData.append("files", files[index]);
        var startDate = new Date();

        await resolveAfter2Seconds(files[index]);
        var endDate   = new Date();
        var diff = endDate - startDate;

            asyncMultipleFileUploadSuccess.innerHTML = "time taken :::: " + diff;
            asyncMultipleFileUploadSuccess.style.display = "block";
    }
}

function uploadMultipleFiles(files) {
     var startDate = new Date();
    var formData = new FormData();
    for(var index = 0; index < files.length; index++) {
        formData.append("files", files[index]);
    }

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost:8080/uploadMultipleFiles");

    xhr.onload = function() {
        console.log(xhr.responseText);
       // var response = JSON.parse(xhr.responseText);
        if(xhr.status == 200) {
            multipleFileUploadError.style.display = "none";
            var content = "<p>All Files Uploaded Successfully</p>";
            // for(var i = 0; i < response.length; i++) {
            //     content += "<p>DownloadUrl : <a href='" + response[i].fileDownloadUri + "' target='_blank'>" + response[i].fileDownloadUri + "</a></p>";
            // }

    var endDate   = new Date();
    var diff = endDate - startDate;

            multipleFileUploadSuccess.innerHTML = content + "time taken :::: " + diff;
            multipleFileUploadSuccess.style.display = "block";
        } else {
            multipleFileUploadSuccess.style.display = "none";
            multipleFileUploadError.innerHTML = (response && response.message) || "Some Error Occurred";
        }
    }

       // console.log(xhr.responseText);
 

    xhr.send(formData);
}


singleUploadForm.addEventListener('submit', function(event){
    var files = singleFileUploadInput.files;
    if(files.length === 0) {
        singleFileUploadError.innerHTML = "Please select a file";
        singleFileUploadError.style.display = "block";
    }
    uploadSingleFile(files[0]);
    event.preventDefault();
}, true);


multipleUploadForm.addEventListener('submit', function(event){
    var files = multipleFileUploadInput.files;
    if(files.length === 0) {
        multipleFileUploadError.innerHTML = "Please select at least one file";
        multipleFileUploadError.style.display = "block";
    }
    uploadMultipleFiles(files);
    event.preventDefault();
}, true);


asyncMltipleUploadForm.addEventListener('submit', function(event){
    var files = asyncMultipleFileUploadInput.files;
    if(files.length === 0) {
        asyncMultipleFileUploadError.innerHTML = "Please select at least one file";
        asyncMultipleFileUploadError.style.display = "block";
    }
    asynchUploadMultipleFiles(files);
    event.preventDefault();
}, true);

Can you please help

question from:https://stackoverflow.com/questions/65670909/browser-getting-stuck-to-upload-large-files

Answer 1

Waitting for answers