///
///
function jDrop(params) {
var defaultParams = {
uploadButton: null,
selectButton: null,
cancelButton: null,
dropArea: null,
allowMultiple: false,
serverURL: null,
noHTML5: null,
filesSelected: null,
uploadError: null,
uploadAbort: null,
uploadProgress: null,
uploadComplete: null,
dropEnter: null,
dropExit: null,
dropOver: null,
fileDrop: null,
type: null,
noHTML5UploadStart: null,
displayArea: null
};
$.extend(defaultParams, params);
this.uploadButton = defaultParams.uploadButton;
this.selectButton = defaultParams.selectButton;
this.cancelButton = defaultParams.cancelButton;
this.dropArea = defaultParams.dropArea;
this.allowMultiple = defaultParams.allowMultiple;
this.serverURL = defaultParams.serverURL;
this.noHTML5 = defaultParams.noHTML5;
this.noHTML5UploadStart = defaultParams.noHTML5UploadStart;
this.filesSelected = defaultParams.filesSelected;
this.uploadError = defaultParams.uploadError;
this.uploadAbort = defaultParams.uploadAbort;
this.uploadProgress = defaultParams.uploadProgress;
this.uploadComplete = defaultParams.uploadComplete;
this.dropEnter = defaultParams.dropEnter;
this.dropExit = defaultParams.dropExit;
this.dropOver = defaultParams.dropOver;
this.fileDrop = defaultParams.fileDrop;
this.type = defaultParams.type;
this.displayArea = defaultParams.displayArea;
this.fileUploader = null;
this.isHTML5 = null;
this.id = 1;
this.files = new jDrop.files();
}
jDrop.prototype = {
create: function () {
if (!this.selectButton) {
alert('Please specify a Select Files button.');
return false;
}
var self = this, parentElement = this.selectButton[0].parentElement,
selectFilesOuterHTML = this.selectButton[0].outerHTML,
setHeight = this.selectButton.outerHeight(),
setWidth = this.selectButton.outerWidth();
/// replace the select files button with the file upload button
this.selectButton.remove();
/// add the select file button back with a wrapper for upload support in legacy browsers
if (this.type == "CustomTemplateUpload") {
$('' + selectFilesOuterHTML + '').appendTo($(parentElement));
} else if (this.type == "ManualManager") {
$('' + selectFilesOuterHTML + '').insertBefore($(parentElement).find("li:first-child"));
} else {
$('' + selectFilesOuterHTML + '').insertBefore($(parentElement).find(".uploadFile-capacity-info"));
}
this.fileUploader = $(parentElement).find("#txFileSelect");
if (typeof FormData == 'function') {
this.isHTML5 = true;
this.bindDropArea();
} else {
this.isHTML5 = false;
/// call users no html5 function
///
if (typeof this.noHTML5 == 'function') {
this.noHTML5();
};
}
this.fileUploader.change(function () {
///
/// add files to array then call users files selected function
self.userFilesSelected($(this)[0].files);
});
/// bind upload button
///
if (this.uploadButton) {
this.uploadButton.click(function () {
self.uploadFiles();
});
}
},
bindDropArea: function () {
var self = this;
if (this.dropArea) {
this.dropArea[0].addEventListener('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
/// call clients function
if (typeof self.dropEnter == 'function') {
self.dropEnter(e);
}
});
this.dropArea[0].addEventListener('dragexit', function (e) {
e.stopPropagation();
e.preventDefault();
/// call clients function
if (typeof self.dropExit == 'function') {
self.dropExit(e);
}
});
this.dropArea[0].addEventListener('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
/// call clients function
if (typeof self.dropOver == 'function') {
self.dropOver(e);
}
});
this.dropArea[0].addEventListener('drop', function (e) {
e.stopPropagation();
e.preventDefault();
// add files
self.userFilesSelected(e.dataTransfer.files);
/// call clients function
if (typeof self.fileDrop == 'function') {
self.fileDrop(e);
}
});
}
},
userFilesSelected: function (fileArray) {
this.id = 1;
this.files.fileCollection.splice(0, this.files.fileCollection.length);
if (this.isHTML5) {
for (var i = 0; i < fileArray.length; i++) {
var myFile = new jDrop.file();
myFile.id = this.id;
myFile.name = fileArray[i].name;
myFile.size = fileArray[i].size;
myFile.type = fileArray[i].type;
myFile.valid = true;
myFile.fileObject = fileArray[i];
this.files.fileCollection[this.files.fileCollection.length] = myFile;
this.id++;
}
/// inform client of selected files
///
this.filesSelected(this.files.fileCollection);
} else {
/// legacy
var myFile = new jDrop.file();
myFile.id = this.id;
myFile.name = this.fileUploader.val();
myFile.size = 'NA';
myFile.type = 'NA';
myFile.valid = true;
myFile.fileObject = null;
this.files.fileCollection[this.files.fileCollection.length] = myFile;
this.filesSelected(this.files.fileCollection);
}
this.uploadFiles();
},
uploadFiles: function () {
if (this.isHTML5) {
// check all files are valid
var validFileCount = 0;
var myXMLHttpRequest = new XMLHttpRequest(),
myFormData = new FormData(), totalSize = 0, self = this;
for (var i = 0; i < this.files.fileCollection.length; i++) {
var myFile = this.files.fileCollection[i];
if (myFile.valid) {
validFileCount++;
totalSize += myFile.size;
myFile.fileObject.id = myFile.id;
myFormData.append('fileToUpload', myFile.fileObject);
myFormData.append('fileID', myFile.id);
}
}
if (validFileCount <= 0) {
this.uploadError('Error: No valid files were selected.');
return false;
}
myXMLHttpRequest.upload.addEventListener("progress", this.uploadProgress, false);
myXMLHttpRequest.addEventListener("load", function (e) {
/// turn the response into jSON and pass to client
///
var response = e.target.responseText;
try {
var obj = $.parseJSON(response);
} catch (e) {
self.uploadError('The file you attempted to upload apears to be damaged or is too large');
}
self.uploadComplete(obj);
}, false);
myXMLHttpRequest.addEventListener("error", this.uploadError, false);
myXMLHttpRequest.addEventListener("abort", this.uploadCanceled, false);
/// bind the abort button
///
if (self.cancelButton) {
self.cancelButton.unbind('click').bind('click', function () {
myXMLHttpRequest.abort();
});
}
/// begin the file transfer to the server
myXMLHttpRequest.open("POST", this.serverURL);
myXMLHttpRequest.send(myFormData);
} else {
/// legacy upload
var self = this;
var hasLoaded = false, fileJSON = '', oldParent = $(self.fileUploader[0].parentElement),
uploadFrame = '' +
'',
uploadForm = '' +
'
';
// call user function
if (typeof this.noHTML5UploadStart == 'function') {
this.noHTML5UploadStart();
}
uploadFrame = $(uploadFrame);
uploadFrame.appendTo(document.body);
uploadForm = $(uploadForm);
uploadForm.appendTo(document.body); // <-- this is causing the random scroll bar issue
$("").appendTo(uploadForm);
self.fileUploader.appendTo(uploadForm);
$(uploadFrame).load(function () {
if (!hasLoaded) {
uploadForm[0].submit();
hasLoaded = true;
} else {
// Files have finished being uploaded
/// get details of uploaded file
fileJSON = $("#legacyUploadFrame").contents().find('body').html();
/// move the file uploader back to its original position
self.fileUploader.appendTo(oldParent);
/// remove the iframe and form
uploadFrame.remove();
uploadForm.remove();
self.fileUploader.val('');
try {
var obj = $.parseJSON(fileJSON);
} catch (e) {
self.uploadError('Error: Something went wrong when converting jSON string to JSON, check formatting.');
}
self.uploadComplete(obj);
}
});
}
}
}
jDrop.file = function () {
this.id = null;
this.size = null;
this.name = null;
this.type = null;
this.valid = null;
this.fileObject = null;
};
jDrop.files = function () {
this.fileCollection = [];
};
jDrop.formatLegacyName = function (fileNameWithFakePath) {
// removes the IE Fake path from file name so that it displays nicer to the user
var output = '';
if (fileNameWithFakePath.toLowerCase().indexOf("c:\\fakepath\\") > -1) {
var pathParts = fileNameWithFakePath.split("\\");
output = (pathParts[pathParts.length - 1]);
}
return output;
}
jDrop.convertSizeToString = function (sizeInBytes) {
var bytesString = '';
try {
if (sizeInBytes >= 1073741824) {
/*Gigabyte */
bytesString = (Math.round(sizeInBytes * 100 / (1073741824)) / 100).toString() + 'GB';
} else if (sizeInBytes > 1024 * 1024) {
/*Megabyte*/
bytesString = (Math.round(sizeInBytes * 100 / (1024 * 1024)) / 100).toString() + 'MB';
} else {
/*Kilobyte*/
bytesString = (Math.round(sizeInBytes * 100 / 1024) / 100).toString() + 'KB';
}
} catch (err) {
bytesString = 'Error calculating bytes';
};
return bytesString;
}