The ajax call resulted in a failed large file upload

Currently, I am focusing on implementing file upload functionality. I have developed a code snippet using an ajax call that works flawlessly when uploading files (GB) from my local server.

$.ajax({
    type: "POST",
    url: "process/uploadFlatFile.htm",
    enctype : 'multipart/form-data',
    //timeout: 0,
    crossDomain: true,
    data : formData,
    processData: false, 
    contentType: false,
    cache: false,
    dataType: 'json',
    xhr: function() {
        myXhr = $.ajaxSettings.xhr();
        //myXhr = new XMLHttpRequest();
        console.log("myXhr: " + myXhr.upload);
        if(myXhr.upload){
            console.log("adding progress event listener");
            myXhr.upload.addEventListener('progress', showProgress, false);
        } else {
            console.log("Upload progress is not supported.");
        }
        return myXhr;
    },beforeSend: function(xhr, opts) {
        console.log("beforeSend:xhr: " + xhr + ", opts: " + opts);
        currXhr = xhr;
        showProgressBar();
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal);
        percent.html(percentVal);
        $(cancelSelector).removeAttr('disabled');
    },

    success: function(result,status,xhr) {
        console.log("success:result: " + result);
        console.log("success:status: " + status);
        console.log("success:xhr: " + xhr);
        var percentVal = '100%';
        bar.width(percentVal);
        //$("#fountainGG").hide();
        percent.html(percentVal);
        $.unblockUI({ 
            onUnblock: function(){  
                if(result=="success"){
                    console.log("SUCCESS PART :")

                    alertMessage("Success","File Uploaded Successfully","info");
                    setTimeout(function(){
                        window.location.href = "processFlow.htm";
                        //newProcessClicked('yes'); closeConDiv()
                    }, 2000);
                }else{

                    alertMessage("Error","Error in upload. Try Again !","info");
                }
            } 
        });
    },
    complete: function(xhr,status){
        console.log("COMPLETE PART :")
        console.log("complete:status: " + status + ", xhr: " + xhr);
        $('#btnGoUpload').prop('disabled', false);
    },
    error: function(xhr, statusText, err) {
        $.unblockUI();
        console.log("statusText: " +statusText);
        console.log("error: " + err);
        var msg = "Error in uploading file. Try Again !";
        if (err == "abort"){
            msg = "File upload aborted.";
        }
        alertMessage("Error",msg,"info");
    }
});

However, when attempting to upload GB-sized files (above 30 Gb) from a public server, the ajax call encounters errors after a few attempts. I suspect this may be due to a connection timeout issue. If it is indeed a connection timeout problem, how can it be resolved?

Answer №1

If you're facing a potential time out limit issue, you can address it by adding this command at the beginning of your PHP receiving script:

ini_set('max_execution_time', 0);

To overcome restrictions on maximum upload size that may be causing issues, modify the values for upload_max_filesize and post_max_size in your php.ini file as follows:

; Maximum allowed size for uploaded files.
upload_max_filesize = 50M

; Must be greater than or equal to upload_max_filesize
post_max_size = 50M

Remember to make these changes and then restart your web server.

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

detecting click or submission actions on iOS

Below is the HTML code for a form submit that has been modified to prevent refreshing on submission. Everything seemed to be working fine, until I encountered an issue with the submit button not functioning on iOS. The onsubmit event simply wouldn't ...

Use $parse to extract the field names that include the dot character

Suppose I have an object with a field that contains a dot character, and I want to parse it using $parse. For instance, the following code currently logs undefined - var getter = $parse('IhaveDot.here'); var context = {"IhaveDot.here": 'Th ...

PHP website freezes unexpectedly in Firefox version 4

For over a year, our website has been functioning perfectly. However, with the release of Firefox4, we have noticed a new issue. Occasionally, the page hangs randomly. I have tested the website on IE8/9, Chrome10+, Safari, and Opera, and the issue only see ...

Error message in Prestashop console: "jsonData is null, causing a TypeError"

I'm new to Prestashop and running into an issue. Whenever someone clicks the "Add to cart" button, the console displays an error message saying "TypeError: jsonData is null" and the product doesn't seem to get added to the cart. However, upon ref ...

Incorporating a JavaScript code into my SharePoint master page to automatically deselect a checkbox resulted in updating the page title

I've integrated the following JavaScript code into my SharePoint master page: <script type="text/javascript> function DefaultUploadOverwriteOff() { if (document.title== "Upload a document") { var input=document.querySelectorAll("input"); ...

Updating an if statement in Rails views via AJAX: the ultimate guide

In my app, I have votable posts that users can vote on through AJAX. While this functionality works well, I also want to update the status of a post (indicating whether it is an agreed milestone) when a user votes through AJAX. Below is the code snippet fo ...

Issue with Angular filter not being effective within ng-repeat

For all code regarding this issue, please visit: Filter: <input type="text" ng-model="search"> <tr ng-repeat="(id, group) in groups | filter:search" class="editing-{{group.editing}}"> The goal is to have the rows filtered out based on the in ...

Concealing overflow in a sticky container when a fixed child element is present

I am currently working on a website where I have implemented slide-up section panels using position: sticky while scrolling. However, I am encountering issues with fixed elements within the sticky panels not properly hiding outside of the respective sectio ...

What's the latest with Twitter's new tweets feature?

What method does Twitter use to deliver asynchronous notifications for new tweets? If it involves server push technology, can anyone provide information or suggestions on how this functionality might be achieved? Thank you ...

What issues are present in the Ajax script and the PHP radio input?

I'm having trouble extracting the value of a radio input in this code so I can update the database: <script type="text/javascript> function getVote() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlh ...

Is there a way to transfer a variable from Angular 2 Frontend Express JS to an Angular 2 component?

After conducting thorough research, I have made specific modifications to my code. However, I am encountering some errors in my console that I cannot seem to resolve. Despite following a tutorial step by step. Your assistance would be highly valued as I a ...

What are the steps to troubleshoot and fix my AJAX email functionality in Wordpress?

Good Afternoon, I have encountered a frustrating issue. I am currently attempting to utilize an AJAX function to send an email from a contact form on my Wordpress site. The email is sent successfully when the form fields are left blank. However, as soon a ...

What could be causing the submit button to reactivate before all form fields have been completed?

I have implemented the code snippet below to validate each field in my contact form using bootstrap-validator and an additional check through Google reCAPTCHA. You can view and test the form here. The submit button is initially disabled with the following ...

Create a router link in Vue using the command "Vue

I have a Vue application that displays videos. I am looking to automatically generate a random router link every time I click on: <router-link to="/video/this_value_to_be_random">Random video</router-link> Within the component: <vue-vide ...

Display the Bootstrap modal only once after a specific portion of the page has been scrolled upon initial

I've almost got this feature working, but I think I'm missing some key logic. My goal is to have a Bootstrap modal appear when a user scrolls to 70% down the page. It's working, but the issue is that when I close the modal, it immediately re ...

The dynamic relationship between redux and useEffect

I encountered a challenge while working on a function that loads data into a component artificially, recreating a page display based on the uploaded data. The issue arises with the timing of useEffect execution in the code provided below: const funcA = (p ...

The presence of foreign collections does not appear to be reflected in the combined data

I am developing a basic forum and I'm looking to connect two databases so I can show information about the user who created a post on that post: User.js: _id:60ccb13a21d65f0c7c4c0690 username: testuser name: test And Createpost.js _id:60d80b1305dcc5 ...

Send all of the elements within an array as arguments to a function

My challenge involves working with an array of values: ['a', 'b', 'c', 'd'] I must pass these values as parameters to a function like this: window.myFunction('a', 'b', 'c', 'd&ap ...

Extract the text enclosed by two specific symbols within a string and add it to a new array

I have a string formatted as follows: var str = "-#A This text belongs to A. Dummy Text of A. -#B This text belongs to B. Dummy Text of B. -#C This text belongs to C. Dummy text of C. -#Garbage This string should be ignored" I am looking to convert this ...

How to showcase images and text from an array of objects using React

I'm currently working on a React lightbox that is supposed to display a loop of objects containing images and text. However, I'm facing an issue where the images are not showing up with the corresponding text label as intended. It seems like I a ...