Using Ajax Uploader multiple times in a single page

Question

Using Ajax Uploader multiple times in a single page

I created a custom ajax file uploader that functions perfectly with one instance on the page. However, I am currently facing an issue while trying to modify it to support multiple instances. When I attempt to upload multiple files using one form, the first file uploads successfully. But for all subsequent files, it redirects to the next file in line from the second form instance. Strangely, if I upload using the last (second) instance of the form, multiple files upload without any problems. The unique ID names are used consistently throughout the upload form and referenced in the JavaScript functions. Below are snippets of the relevant code:

The forms are dynamically generated by PHP with a randomly generated unique ID $uid. First, the initialization of the upload function is output to the page within a <script> tag:

'<script> '.
    'jQuery(document).ready(function($){ '.
        'var myup_'.$uid.' = new MyUp({ '.
            // other settings being passed
        }); '.
    '}); '.
'</script>';

Similarly, the HTML form snippet includes the necessary input fields:

'<div class="myup_container" style="'.$inlinestyle.'">'.
    '<form name="myup_form_'.$uid.'" id="myup_form_'.$uid.'" action="javascript:void(0);" enctype="multipart/form-data">'.
        // more form elements
    '</form>'.
    // additional div elements as needed
'</div>';

More details can be found in the complete JavaScript segment posted above. If there's a straightforward solution to resolve this issue with multiple instances interfering with each other during file uploads, kindly provide your insights.

javascript ajax file-upload multiple-instances instances

Answer 1

Answer №1

The constructor function in the provided code snippet declares all prototype methods, leading to them being overridden every time a new MyUp object is created. As a result, each object will use the configuration from the most recent one.

function MyUp(config) {
    /// ...
    var self = this;
    MyUp.prototype.foo = function() {
        // utilize `self`
    };
}

To avoid this issue, it is recommended to define the methods only once and reference the this keyword within the functions:

function MyUp(config) {
    /// ...
}
MyUp.prototype.foo = function() {
    // utilize `this`
};

If there is a need for static members within the class (methods or variables that are not associated with any instance), they can be declared as properties of the function. For public usage - MyUp.begin = function() {}. Alternatively, for private usage, these static members can be defined inside a module:

(function() {
   var uploadsInProgress = 0;

   // declare MyUp and incorporate uploadsInProgress; hidden from external code

   window.MyUp = MyUp;
})();

This approach may not completely resolve the upload issues, but it certainly aids in maintaining clarity when creating multiple objects.

Answer 2

The constructor function in the provided code snippet declares all prototype methods, leading to them being overridden every time a new MyUp object is created. As a result, each object will use the configuration from the most recent one.

function MyUp(config) {
    /// ...
    var self = this;
    MyUp.prototype.foo = function() {
        // utilize `self`
    };
}

To avoid this issue, it is recommended to define the methods only once and reference the this keyword within the functions:

function MyUp(config) {
    /// ...
}
MyUp.prototype.foo = function() {
    // utilize `this`
};

If there is a need for static members within the class (methods or variables that are not associated with any instance), they can be declared as properties of the function. For public usage - MyUp.begin = function() {}. Alternatively, for private usage, these static members can be defined inside a module:

(function() {
   var uploadsInProgress = 0;

   // declare MyUp and incorporate uploadsInProgress; hidden from external code

   window.MyUp = MyUp;
})();

This approach may not completely resolve the upload issues, but it certainly aids in maintaining clarity when creating multiple objects.

Answer 3

Answer №2

After struggling to implement Alex Gyoshev's suggestion (due to my own shortcomings), I ultimately decided to completely abandon the object/prototype approach. Instead of instantiating objects within the form, I opted to declare a MyUpConfig variable as an empty array in the global scope. For each html form, I appended MyUpConfig['.$uid.'] = followed by an array of settings.

In the javascript file, I associated each form's file input and submit events with its unique id, storing the file data for each input field in an array: TheFiles[uid] = files. This way, during the upload submit process, it retrieves the uid from the upload button element and only uploads files corresponding to that specific id in the array.

I successfully implemented multiple upload forms on a single page, allowing them to operate simultaneously without any interference.

Answer 4

After struggling to implement Alex Gyoshev's suggestion (due to my own shortcomings), I ultimately decided to completely abandon the object/prototype approach. Instead of instantiating objects within the form, I opted to declare a MyUpConfig variable as an empty array in the global scope. For each html form, I appended MyUpConfig['.$uid.'] = followed by an array of settings.

In the javascript file, I associated each form's file input and submit events with its unique id, storing the file data for each input field in an array: TheFiles[uid] = files. This way, during the upload submit process, it retrieves the uid from the upload button element and only uploads files corresponding to that specific id in the array.

I successfully implemented multiple upload forms on a single page, allowing them to operate simultaneously without any interference.

Using Ajax Uploader multiple times in a single page

Answer №1

Answer №2

Similar questions

What's the reason why Angular stops flickering with the use of "/" in href?

How do I make an AJAX request in Rails without including a question mark in the data?

Error loading content for webpack://SwaggerUIBundle/src/core/system.js in Swagger UI

What is the best way to extract row data from a datatable and transmit it in JSON format?

The Custom Validator encounters an issue retrieving the Combobox identification

Discover the power and potential of Ajax in combination with PHP and

The Angular controller failed to return a defined value

Reasons Child Components in React Native & Redux Are Not Re-rendered with Every State Update

Angular repeatedly executes the controller multiple times

What are the implications of AngularJS's filter on performance?

Tips for temporarily halting my animation using javascript

The radio button fails to trigger the setState function in React

extracting the data from the list item within an AJAX response

`Incompatibility with Internet Explorer causes AJAX loader GIF to fail when using asynchronous POST requests`

What steps do I need to take to ensure a prepared statement update functions properly in Node.js using JavaScript?

Encountering an issue with a React-slick slider test case - receiving an error related to the inability to access property 'querySelector

Integrating dual Google Maps onto a single HTML page

Tips for resolving the DOMException error "Failed to execute 'open' on 'XMLHttpRequest': Invalid URL in a MERN Stack application"

Managing input/output requests on Amazon EC2 instances

Using JQuery to attach an event listener to Ajax success