Search code examples
jqueryfile-uploadasp.net-core-mvc

Uploading Big Files using JQuery and Promises

I really need some help here as I am really stuck and couldn't find a way out of it.

Background: I have a web form (using jQuery and ASP.NET Core 6 MVC), which allows the user to upload a book to a library (for a VLE system). Apart from the book details, this form allows the user to upload an image and a PDF document.

All fields and validations are working properly, even the file uploads. The files are being converted into 64 bit string and passed as string parameters to my C# application.

My problem is occurring when the PDF file being uploaded is of a certain size (e.g. 8 MB in my case). In this case all the parameters are being passed as null (even the simple fields, such as book name, etc):

enter image description here

However if the file is small, everything is uploaded properly (e.g. in this case it was a 128 KB pdf file - the form details were all exactly the same):

enter image description here

At first I though that maybe the code is not waiting for the file to be uploaded, but when I explicitly removed the document string, but left the other document details - filename and type, these were passed properly to the application, as indicated in the below image

enter image description here

This is my first time working with promises so the code may have some issues, but I am suspecting that the issue may be the very long string being generated, but could be wrong. Any ideas what could be happening here please? Please find my jQuery code below (the problematic parameter is "document": dataDocument,.

FYI: ValidateMaintainBook() is a validation function and simply returns true if all is OK - In this case it is returning true.

function SubmitMaintainBook() {

  if (ValidateMaintainBook()) {

    getImage()
      .then((dataImage) => {

        getDocument()
          .then((dataDocument) => {

            var reqData = {
              "id": $("#hdnId").val(),
              "courseName": $("#txtCourseName").val(),
              "subtitle": $("#txtSubtitle").val(),
              "field": $(".cmbField").find(".list").find(".selected").data("value"),
              "isbnAsin": $("#txtIsbnAsin").val(),
              "genre": $(".cmbGenre").find(".list").find(".selected").data("value"),
              "edition": $("#txtEdition").val(),
              "citation": $("#txtCitation").val(),
              "authors": getAuthors(),
              "codeFront": $("#txtCodeFront").val(),
              "codeBack": $("#txtCodeBack").val(),
              "language": $(".cmbLanguage").find(".list").find(".selected").data("value"),
              "totalPages": $("#txtTotalPages").val(),
              "publisher": $("#txtPublisher").val(),
              "citationFormat": $(".cmbCitationFormat").find(".list").find(".selected").data("value"),
              "publicationDate": $("#txtPublicationFormat").val(),
              "description": $("#txtDescription").val(),
              "purchaseLink": $("#txtPurchaseLink").val(),
              "password": $("#hdnPassword").val(),
              "image": dataImage,
              "imageName": $('#image-input')[0].files[0].name,
              "imageType": $('#image-input')[0].files[0].type,
              "document": dataDocument,
              "documentName": $('#pdf__file--download')[0].files[0].name,
              "documentType": $('#pdf__file--download')[0].files[0].type
            };

            $.ajax({
              timeout: 20000,
              url: "/Library/SubmitMaintainBook",
              async: false,
              cache: false,
              type: "POST",
              data: reqData,
              dataType: "json",
              success: function(jsonData) {

                if (jsonData.result != true) {
                  alert(jsonData.errorMessage);
                } else {
                  bootstrap.Modal(document.getElementById('MaintainBook')).hide();

                  var maintainBookModalSuccess = new bootstrap.Modal(document.getElementById('MaintainBookSuccess'));
                  maintainBookModalSuccess.show();
                }

              },
              error: function(xhr, ajaxOptions, thrownError) {}
            });
          })
        //.catch(err => { alert("Document Error"); })
      })
    //.catch(err => { alert("Image Error"); })
  }
}

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

async function getImage() {
  var file = $('#image-input')[0].files[0];
  let promise = getBase64(file);
  return await promise;
}

async function getDocument() {
  var file = $('#pdf__file--download')[0].files[0];
  let promise = getBase64(file);
  return await promise;
}

Thanks a lot in advance for your help

Solution

  • A limit on the length of individual form values. Defaults to 4,194,304 bytes, which is approximately 4MB.

    Try to set your FormOptions.ValueLengthLimit Property like below:

    builder.Services.Configure<FormOptions>(o =>
            {
                o.ValueLengthLimit = int.MaxValue;
            });

    result:

    enter image description here