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?

javascriptajaxasp.net-mvcmultipartform-dataform-data

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

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 №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) {
    });
};

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

Events related to key press timing in HTML 5 canvas

Currently, I am developing a game similar to Stick Hero for Android using HTML5. I am working on the code that will capture the time of key press (specifically the right arrow key with ASCII 39) in JavaScript and expand a stick accordingly. <!doctype h ...

javascriptjqueryhtmlcanvasjquery-events

Is it better to have a single object with all required modules in NodeJS, or follow the "standard" paths in the code?

Being a fan of creating global namespaces in javascript, I often use this approach in my app development. For instance, if my application is named Xyz, I typically create an object called XYZ to organize properties and nested objects like so: XYZ.Resource ...

javascriptnode.jsrequire

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

I've run into a challenge while attempting to position a sidebar over page wrappers. The issue with absolute positioning arises when the sidebar needs to align with the corner of the blue header. I have contemplated using JavaScript to maintain its cu ...

javascriptjqueryhtmlcssfrontend

What is the best way to utilize ng-if to conceal a component in AngularJS when a button in a separate component is clicked?

I am facing a challenge with two child components within a parent component. My goal is to hide component1 when a button in component2 is clicked. Below is an illustration of the current code I am handling: Parent Component HTML: <div ng-app='ap ...

javascriptangularjscomponents

Is JavaScript still running despite not displaying insecure items due to IE 8 security warning?

After a user completes a transaction on my site, the confirmation page displays Google conversion tracking code in a small JavaScript snippet. This code is located on my Wordpay callback page, which pulls data from the regular site (HTTP) to the Worldpay s ...

javascriptsecurityinternet-explorerwarnings

Access user connections through Discord.js bot

Hi there, I'm currently working on creating a bot that can retrieve a user's connected battle.net account and display their game rank. I am utilizing the discord.js library and have been attempting to access the UserProfile through the bot. Unfor ...

javascriptnode.jsdiscord

The JavaScript function I created to remove the last item in an array is not functioning correctly when it encounters an "else

My button has been designed to delete the last index from this.fullformula, which is a string. However, I've encountered an issue with deleting characters from this.result, which is an integer. Instead of looping over the function, it only deletes one ...

javascriptvue.js

Guide to selecting a specific year on a calendar using Selenium with JavaScript

While attempting to create a Selenium test using JavaScript, I encountered an issue with filling in calendar data through a dropdown menu: const {Builder, By, Key} = require('selenium-webdriver') const test2 = async () => { let driver = awa ...

javascriptseleniumautomated-tests

Dynamically importing files in Vue.js is an efficient way to

Here's the code snippet that is functioning correctly for me var Index = require('./theme/dir1/index.vue'); However, I would like to utilize it in this way instead, var path = './theme/'+variable+'/index.vue'; var Inde ...

javascriptreactjsmeteorvue.jsvuejs2

Trouble retrieving information from database with ajax implementation

i am struggling with the following code: connecting to a database <?php if ($_SERVER['REQUEST_METHOD'] == 'POST') { $conn = new mysqli("localhost", "root", "", "jquery"); if ($conn->connect_error) { die("Connectio ...

phpjquerymysqlajax

Customize numbers in JavaScript with a Unity-inspired design changer

I am currently working on implementing a number input feature that allows users to adjust values by clicking and holding the mouse button while moving the cursor left and right, similar to Unity's editor number adjuster: https://youtu.be/uY9PAcNMu8s?t ...

javascript

Tips for organizing divs once another div has been hidden using jquery

I am working towards implementing a live result filter feature. There are three filters available: Good fit, bad fit, and scheduled. When the "Good fit" filter is clicked, it should display panels with the class "good_fit_panel". Let's assume there ar ...

javascriptjquery

producing base64 encoding that results in a blank image

I have some code that is supposed to get an image from a video using canvas. However, when I save this base64 code into an image, I end up with a black image. What could be causing this issue? Here is my JavaScript code: var input = document.getElementBy ...

javascriptphpjqueryajaxbase64

New feature in jQuery inputmask enables placeholder text to be retained

I have integrated the inputmask feature from https://github.com/RobinHerbots/jquery.inputmask in my project, and I am applying the mask to all textboxes with the class "date". However, I am encountering a problem where if the user leaves one or more letter ...

javascriptjquery

Tips for displaying lower quality images while initially downloading higher quality versions

I need to download and display a large image in an img tag. Since the image is not Progressive JPEG, it will render as it downloads. Is there a way to show a low-resolution version of the image while it fetches from the server using only CSS or an HTML p ...

javascripthtmlcss

Use TypeScript to cast the retrieved object from the local storage

const [savedHistory, setSavedHistory] = useState(localStorage.getItem('history') || {}); I'm facing an issue in TypeScript where it doesn't recognize the type of 'history' once I fetch it from localStorage. How can I reassign ...

javascripttypescript

How to effectively transfer a JSON object from a Python function to JavaScript using Eel, allowing you to seamlessly utilize and modify the JSON data

Let's delve into a slightly confusing question together. Have you heard of Eel? It's a Python module that lets you use functions created in Python in Javascript, and vice versa. What I want to achieve is taking a JSON object generated by a Python ...

javascriptpythonjqueryjsoneel

The jQuery autocomplete feature with typeahead suggestions fails to appear following a successful AJAX request

I am currently using typeahead.js to incorporate tags into my multiple input setup. The tagging function works as expected, however, I am facing an issue where the autocomplete suggestions are not appearing. Is there a solution to fix this problem? Despit ...

javascriptphpjqueryajaxtypeahead.js

Utilizing Chart.js for generating a sleek and informative line graph

After executing a MySQL query, I obtained two tables named table1 (pl_pl) and table2 (act_act) with the following data: table1: label act_hrs Jan-19 7 Feb-20 8 Mar-20 9 table2: label pl_hrs Mar-20 45 Apr-20 53 I am looking to create a line cha ...

javascriptphpchart.jsdayofmonth

Disable page scrolling after making changes to the DOM

When my JavaScript function executes on page load and at set intervals, it cycles through images supplied by another PHP script. However, every time the function manipulates the DOM, the page scrolls back to the top of the containing div, which is quite fr ...

javascripthtmldomscroll