Fix the strange behavior of the jQuery uploadify plugin (and one bug)

It so happened that on my websites I use the uploadify plugin for jQuery - uploadify.com (although it is outdated, flash and all that, but they already have a paid HTML5 version). The plugin provides multiboot files, without overloading the page, which we all need. However, it turned out that this plugin does not work (and / or does not work as it should) the function of checking the existence of files before sending to the server.

We look at the piece of code we need. And we see four “bugs” there right away. Well, we do not immediately see, yes, let's take it in order.

if (settings.checkExisting) { $.ajax({ type : 'POST', async : false, url : settings.checkExisting, data : {filename: file.name}, success : function(data) { if (data == 1) { var overwrite = confirm('A file with the name "' + file.name + '" already exists on the server.\nWould you like to replace the existing file?'); if (!overwrite) { this.cancelUpload(file.id); $('#' + file.id).remove(); if (this.queueData.uploadQueue.length > 0 && this.queueData.queueLength > 0) { if (this.queueData.uploadQueue[0] == '*') { this.startUpload(); } else { this.startUpload(this.queueData.uploadQueue.shift()); } } } } } }); } 

The first problem. The desired option is not called as it is mentioned in all tutorials on the network - checkExisiting, not checkScript. But it's okay, it's my own fault - it's better to read the native documentation, or even better, the code (the documentation is also confused - in the paid HTML5 version of the plug-in, it is checkScript).

The second problem. I need a very simple function - if there is a file in the album I need on the site, then you don’t need to re-upload it, just silently skip it and go to the next one, it will save traffic a lot, and I don’t need to remember which files have already downloaded, which ones are not - feed uploadify 200 files, and it quickly downloads only those that are not. But it turned out that the authors did not do everything the way I should.
')
I wrote a script, I launch it - oh. For each existing file, it gives a window asking you to confirm the download of this file. And so 200 times.

Will not go.

(The settings.checkExisting stores the path to my script, which should return 1 if such a file already exists and 0 if not.)

As a workaround, you can comment out var overwrite = confirm (..., and instead just write var overwrite = false;

I did that first. But then I decided that it was ugly and not flexible, so I rewrote this feature a bit - I added a new option-property skipExisting to the settings object, and set it to true by default, which means silently skipping existing files. Well, in the code:

 var overwrite = (this.settings.skipExisting) ? false : confirm('A file with the name "' + file.name + '" already exists on the server.\nWould you like to replace the existing file?'); 

The third problem. When uploading a file, the plug-in transmits not only its name, but also an arbitrary set of data in the formData object. But for some reason, when checking the existence of a file, it does not transmit anything but its name. And I after all need the same formData, as when downloading. I at least need to know the number of the album in which to check the file. There may be duplicate file names in different albums. Will not go. Fix

We change it so that it is transferred to .ajax as data not {filename: file.name},

 data : {filename: file.name}, 

And just a formData object (from the settings object):

 data : settings.formData, 

Only now file.name should be added to it, otherwise it will be lost. Add it before calling the .ajax method:

 settings.formData.filename = file.name; 

OK. Run, it works. An, no! Does not work! The first file tries to skip, and then:


Both-on, and here is the bug.

The fourth problem. The authors for some reason forgot about the context. And the .cancelUpload method on this does not work. Well, of course, this is not the one.

There are as many as four options for fixing - this can be forgotten, it can be bogged down, you can simply cache it in a variable before calling .ajax, but we will proceed even simpler, there is a context option in the jQuery.ajax method:

 $.ajax({ context : this, type : 'POST', //  .... 

Everything! Now the plugin works as it should.

So, the new code with the changes:

 if (settings.checkExisting) { settings.formData.filename = file.name; $.ajax({ context : this, type : 'POST', async : false, url : settings.checkExisting, data : settings.formData, success : function(data) { if (data == 1) { var overwrite = (settings.skipExisting) ? false : confirm('A file with the name "' + file.name + '" already exists on the server.\nWould you like to replace the existing file?'); if (!overwrite) { this.cancelUpload(file.id); $('#' + file.id).remove(); if (this.queueData.uploadQueue.length > 0 && this.queueData.queueLength > 0) { if (this.queueData.uploadQueue[0] == '*') { this.startUpload(); } else { this.startUpload(this.queueData.uploadQueue.shift()); } } } } } }); } 

Well, do not forget in the options:

 skipExisting : true, // Show prompt on exisiting files if false and just skip them if true 

You can download the corrected version from me , but I did not minify it, sorry. This is just a js-file, you still need to first download the full archive on uploadify.com