Commit 76bc4042 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Initial draft of FileUpload.js.

parent 0a4edc26
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global $ */
if (!QfqNS) {
var QfqNS = {};
}
(function (n) {
'use strict';
n.FileUpload = function (formSelector, targetUrl, sip) {
this.formSelector = formSelector;
this.targetUrl = targetUrl;
this.sip = sip;
// TODO: Seriously, I'd like to have an event system.
this.fileUploadStartCallbacks = new n.Helper.FunctionList();
this.fileUploadEndCallbacks = new n.Helper.FunctionList();
this.fileUploadSuccessCallbacks = new n.Helper.FunctionList();
this.fileUploadErrorCallbacks = new n.Helper.FunctionList();
this.setupOnChangeHandler();
};
/**
* @public
* @param handler
*/
n.FileUpload.prototype.addFileUploadStartHandler = function (handler) {
this.fileUploadStartCallbacks.addFunction(handler);
};
/**
* @public
* @param handler
*/
n.FileUpload.prototype.addFileUploadEndHandler = function (handler) {
this.fileUploadEndCallbacks.addFunction(handler);
};
/**
* @public
* @param handler
*/
n.FileUpload.prototype.addFileUploadSuccessHandler = function (handler) {
this.fileUploadSuccessCallbacks.addFunction(handler);
};
/**
* @public
* @param handler
*/
n.FileUpload.prototype.addFileUploadErrorHandler = function (handler) {
this.fileUploadErrorCallbacks.addFunction(handler);
};
/**
*
* @private
*/
n.FileUpload.prototype.setupOnChangeHandler = function () {
$(this.formSelector + " :file").on('change', this.handleFileUpload.bind(this));
};
/**
* @private
* @param event
*/
n.FileUpload.prototype.handleFileUpload = function (event) {
this.fileUploadStartCallbacks.call(event);
var data = this.prepareData(event.target);
$.ajax({
url: this.targetUrl,
type: 'POST',
data: data,
cache: false,
processData: false,
contentType: false
})
.done(this.ajaxSuccessHandler.bind(this))
.fail(this.ajaxErrorHandler.bind(this));
};
n.FileUpload.prototype.prepareData = function (htmlFileInput) {
if (!htmlFileInput.hasAttribute("name")) {
throw new Error("File input element requires 'name' attribute");
}
var fileInputName = htmlFileInput.getAttribute('name');
var data = new FormData();
$.each(htmlFileInput.files, function (key, value) {
data.append(fileInputName + '_' + key, value);
});
data.append('s', this.sip);
return data;
};
/**
* @private
* @param data
* @param textStatus
* @param jqXHR
*/
n.FileUpload.prototype.ajaxSuccessHandler = function (data, textStatus, jqXHR) {
this.fileUploadSuccessCallbacks.call(data, textStatus);
this.fileUploadEndCallbacks.call(this);
};
/**
* @private
* @param jqXHR
* @param textStatus
* @param errorThrown
*/
n.FileUpload.prototype.ajaxErrorHandler = function (jqXHR, textStatus, errorThrown) {
this.fileUploadErrorCallbacks.call(textStatus, errorThrown);
this.fileUploadEndCallbacks.call(this);
};
})(QfqNS);
......@@ -6,44 +6,44 @@
</head>
<body>
<form id="myform">
<form id="myForm">
<label>File
<input name="fileupload" id="fileupload" type="file"></label>
<button id="doupload">Upload</button>
</form>
<button id="submit">Submit</button>
<div id="progress"></div>
<pre id="display"></pre>
<script src="../js/jquery.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script>
var fileUpload = new QfqNS.FileUpload('#myForm', 'api/uploadhandler.php', 'the_sip');
fileUpload.addFileUploadStartHandler(function () {
$('#progress').empty().append('<p>Upload started</p>');
});
fileUpload.addFileUploadEndHandler(function () {
$('#progress').append('<p>Upload finished</p>');
});
$(function () {
$('#doupload').click(function (event) {
event.preventDefault();
var data = new FormData();
$('input[type=file]').each(function (index, object) {
$.each(this.files, function (key, value) {
data.append($(object).attr('name') + '_' + key, value);
});
});
data.append('sip', 'sip_goes_here');
$.ajax({
url: 'api/uploadhandler.php',
type: 'POST',
data: data,
cache: false,
processData: false,
contentType: false
}).done(function (data) {
$("#display").empty().append(data);
});
});
fileUpload.addFileUploadSuccessHandler(function (data) {
$('#progress').append('<p>Upload success</p>');
$('#display').empty().append(data);
});
fileUpload.addFileUploadErrorHandler(function () {
$('#progress').append('<p>Upload made a booboo</p>');
});
$('#submit').click(function () {
$.post('upload.html', $('#myForm').serialize());
});
</script>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment