I am using Blueimp plugin for uploading multiple files. Here is the main.js :
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: 'index.cfm/uploads/',
maxFileSize: 5242880,
acceptFileTypes: /(\.|\/)(txt|csv|pdf|doc|docx|xls|xlsx|ppt|pptx)$/i
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'includes/blueimp/cors/result.html?%s'
)
);
if (window.location.hostname === 'blueimp.github.io') {
// Demo settings:
$('#fileupload').fileupload('option', {
url: '//jquery-file-upload.appspot.com/',
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
});
// Upload server status check for browsers with CORS support:
if ($.support.cors) {
$.ajax({
url: '//jquery-file-upload.appspot.com/',
type: 'HEAD'
}).fail(function () {
$('<div class="alert alert-danger"/>')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
} else {
// Load existing files:
$('#fileupload').addClass('fileupload-processing');
$.ajax({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).always(function () {
$(this).removeClass('fileupload-processing');
}).done(function (result) {
$(this).fileupload('option', 'done')
.call(this, $.Event('done'), {result: result});
});
}
$('#fileupload').bind('fileuploadadd', function (e, data) {
var fileList = $.trim($("#hdnFileList").val());
if (fileList.length == 0) {
$("#hdnFileList").val($.trim(data.files[0].name));
} else {
fileList = fileList + "," + $.trim(data.files[0].name);
$("#hdnFileList").val(fileList);
}
}).bind('fileuploadsubmit', function (e, data) {
Remove($("#hdnFileList"), data.files[0].name);
}).bind('fileuploadfail', function (e, data) {
//Remove($("#hdnFileList"), data.files[0].name);
$.each(data.files, function (index, file) {
if (!file.hasOwnProperty('error')) {
console.log("PASS");
} else {
console.log("FAIL");
}
});
}).bind('fileuploaddone', function (e, data) {
if (typeof data.result.files == "undefined") return;
Add($("#hdnUploaded"), data.result.files[0].upFile);
Add($("#hdnUploadedClientFile"), data.result.files[0].name);
});
//On upload fail remove for Upload queue
var Remove = function (elem, filename) {
var fileList = $.trim(elem.val());
if (fileList.length > 0) {
var arrFiles = fileList.split(",");
for (var i = 0; i < arrFiles.length; i++) {
if (arrFiles[i] == filename) {
arrFiles.splice(i, 1);
}
}
elem.val(arrFiles.join());
}
}
//On upload done add to uploaded queue
var Add = function (elem, filename) {
console.log(filename);
var fileList = $.trim(elem.val());
if (fileList.length == 0) {
elem.val($.trim(filename));
} else {
fileList = fileList + "," + $.trim(filename);
elem.val(fileList);
}
}
});
The code from line #5 - #11 is of concern (rest code is for completeness). The initialization of the object fileupload fires a (involuntary) GET request to the url: 'index.cfm/uploads/' which I don't want to fire on page load.
The same request is properly fired as POST when I click a button, and it works fine.
The PROBLEM is that the GET request on page load is undesirable as it is fired without any arguments and the server-side code handles it as an exception & returns an error message which is properly handled and displayed on the page. But the request should not be fired on PageLoad, and should be made only when file upload button is clicked. So I want to prevent the request to be made on PageLoad.
NOTE - I checked the plugin's author's demo page, and the problem exists on his page too.
I provide the url to the fileupload object on document ready.
$(document).ready(function () {
$('#fileupload').fileupload(
'option',
'url',
'index.cfm/uploads/'
)
});