Unexpected failure when using FormData in Ajax callback for large files

Question

Unexpected failure when using FormData in Ajax callback for large files

I have a file upload control where I can upload various types of files. After getting the file, I store it in a FormData object and make an ajax call to my controller. Everything works well with images and small .mp3 files. However, when I try to upload .mp3 files larger than 5MB, it triggers the error function.

Here is a snippet of my code :

 document.getElementById('fileUploadControl').onchange = function () {

        var data = new FormData();
        var files = $("#fileUploadControl").get(0).files;

        for (var i = 0; i < files.length; i++) {
            data.append("UploadedFile" + i, files[i]);
        }

        var ajaxRequest = $.ajax({
            url: '/Main/HandleFileUpload/',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: "POST",
            success: HandleSuccess,
            error: HandleError
        });

        ajaxRequest.done(function (xhr, textStatus) {
        });
    };

 <input type="file" multiple id="fileUploadControl" style="width:0px;height:0px" />

Any suggestions on how to solve this issue?

javascript ajax asp.net-mvc multipartform-data form-data

Answer 1

Answer №1

Finally, I figured it out with a little help from @techexpert

I made adjustments to the uploadFileSizeLimit in the application settings

<appSettings>
   <add key="uploadFileSizeLimit" value="1048576" />
</appSettings>

Answer 2

Finally, I figured it out with a little help from @techexpert

I made adjustments to the uploadFileSizeLimit in the application settings

<appSettings>
   <add key="uploadFileSizeLimit" value="1048576" />
</appSettings>

Answer 3

Answer №2

The reason for this restriction is primarily due to the set server-side post size limit, put in place for security reasons. When utilizing Tomcat, users have the ability to adjust the connector settings in server.xml to change the maxPostSize value - typically set at 2MB by default.

This limitation pertains to servers running ASP, JSP, or PHP, although the specific configuration file may differ depending on the server being used.

Answer 4

The reason for this restriction is primarily due to the set server-side post size limit, put in place for security reasons. When utilizing Tomcat, users have the ability to adjust the connector settings in server.xml to change the maxPostSize value - typically set at 2MB by default.

This limitation pertains to servers running ASP, JSP, or PHP, although the specific configuration file may differ depending on the server being used.

Answer 5

Answer №3

When the 'fileUploadControl' element is changed, the following function is executed:

    var data = new FormData();
    var files = $("#fileUploadControl").get(0).files;

    for (var i = 0; i < files.length; i++) {
        data.append("UploadedImage" + i, files[i]);
    }

    var ajaxRequest = $.ajax({
        url: '/Main/BroadcastFileUpload/',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: "POST",
        success: LoadImages,
        error: OnLogoFail
    });

    ajaxRequest.done(function (xhr, textStatus) {
    });
};

Answer 6

When the 'fileUploadControl' element is changed, the following function is executed:

    var data = new FormData();
    var files = $("#fileUploadControl").get(0).files;

    for (var i = 0; i < files.length; i++) {
        data.append("UploadedImage" + i, files[i]);
    }

    var ajaxRequest = $.ajax({
        url: '/Main/BroadcastFileUpload/',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: "POST",
        success: LoadImages,
        error: OnLogoFail
    });

    ajaxRequest.done(function (xhr, textStatus) {
    });
};

Unexpected failure when using FormData in Ajax callback for large files

Answer №1

Answer №2

Answer №3

Similar questions

Subclass declaration with an assignment - React.Component

Is it possible to use HTML elements to trigger actions in order to display or conceal divs using JavaScript?

Warning: Shadcn-UI Form Alert - An element is converting an uncontrolled input to controlled mode

Utilizing Django to determine the appropriate view based on whether it is a GET request or an AJAX POST method

Revamp the jquery.ajax promise or find an alternative solution

Enhancing fancybox with dynamic scrollbars as the window size changes

Having trouble getting CSS styles to work properly in conjunction with Javascript code

Building a React component that's a table containing rows that can be scrolled and elements that are clickable

Creating dynamic elements in JavaScript and assigning them unique IDs

Tips on personalizing the default html template in nuxt

how to name a collection variable in MongoDB shell using JavaScript

Encountering excessive re-renders while using MUI and styled components

Creating an interactive star rating system with JSON data

Expand the table in the initial state by using CSS to collapse the tree

Employ the Google Charting library for creating a GeoChart that is currently not displaying

Angular failing to append hash to ng-href in browsers that do not support it

Exiting callback function in JavaScript

Using jQuery, you can easily apply a new class to a div when it is

A ServiceWorker used a promise in FetchEvent.respondWith() that resulted in a non-Response value of 'undefined'. This caused an issue in browser-sync

Is there a different option for managing roles in ASP.NET MVC than Role Provider?