File: /home/e/l/i/eliteafr/pmb/javascript/dojo/snet/fileUploader/Uploader.js
define([
'dojo/_base/lang',
'dojo/_base/declare',
'dojo/_base/Deferred',
'dojo/_base/array',
'dojo/_base/xhr',
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-class',
'dojo/query',
'dojo/has',
'dojo/on',
'dojo/aspect',
'dijit/registry',
'dijit/Dialog',
'snet/DialogConfirm',
'dijit/ProgressBar',
'snet/fileUploader/ProgressBar'
], function(lang, declare, Deferred, array, xhr, dom, domConstruct, domClass, query, has, on, aspect, registry, Dialog, DialogConfirm, ProgressBar, UploadProgressBar) {
return declare(null, {
maxKBytes: 3000, // in kbytes limited by php.ini directive upload_max_filesize
maxNumFiles: 10, // limited by php.ini directive max_file_uploads
bytesOverall: 0,
barOverall: null,
fileStatus: {
numCompleted: 0, // number of completely uploaded files
numAborted: 0, // number of canceled files
numProgressDone: 0, // number of files where upload progress is 100%
numError: 0 // number of files with error
},
files: [], // files that will be uploaded after checking their length and max allowed number of uploads
progressBars: [], // keeps track of created bars
displayTarget: null, // If null, progress is displayed in a dialog, otherwise provide element id
dropTarget: null,
rememberConfirmDelete: false, // do not ask user again to confirm deleting
callback: false,
/**
* Instantiates the fileUploader.
* Expects object with following properties:
* id: // {String|Object} DomNode or id of element that the progress bars are created in.
* url: // {String} url of php page that handles the upload
* target: // {String|Object} DomNode or id of element where files can be dropped onto
*
* @param {Object} props arguments
*/
constructor: function(props) {
if (!this.hasFeatures()) {
this.confirmHasFeatures();
}
else {
this.append_div = props.append_div;
props.dropTarget = dom.byId(props.dropTarget);
lang.mixin(this, props);
this.maxKBytes *= 1048; // e.g. * (1024 + 24)
// add drag and drop events
on(window, 'dragover', function(evt) {
evt.preventDefault(); // necessary for dnd to work
});
on(window, 'drop', function(evt) {
evt.preventDefault();
});
on(this.dropTarget, 'dragenter', function() {
domClass.add(this, 'targetActive');
});
on(this.dropTarget, 'dragleave', function() {
domClass.remove(this, 'targetActive');
});
on(this.dropTarget, 'mouseout', function() {
domClass.remove(this, 'targetActive');
});
on(this.dropTarget, 'drop', lang.hitch(this, function(evt) {
var files = evt.dataTransfer.files;
this.reset();
this.addFiles(files);
domClass.remove(this.dropTarget, 'targetActive');
}));
}
},
/**
* Add and filter files to upload.
* Add files to internal array and calc total amount of bytes to upload. Also check for size and number of uploads limit.
* @param {Array} files instance of FileList object
*/
addFiles: function(files) {
var dfds = [], idx;
dfds[0] = new Deferred();
dfds[0].resolve(false);
// exclude files that are to large
// and chain deferreds so the get fired one after the other
this.files = array.filter(files, function(file) {
idx = dfds.length - 1;
var self = this;
if (file.size > this.maxKBytes) {
dfds[idx + 1] = dfds[idx].then(function(remember) {
var fileName = file.name || file.fileName;
if (!remember) {
return files.length > 1 ? self.confirmFileSize(fileName) : self.confirmFileSizeSingle(fileName);
}
else {
var dfd = new Deferred();
dfd.resolve(true);
return dfd;
}
});
return false;
}
else {
this.bytesOverall += file.size;
return true;
}
}, this);
// limit number of files you can upload
if (this.files.length > this.maxNumFiles) {
this.files = this.files.slice(0, this.maxNumFiles);
idx = dfds.length - 1;
dfds[idx + 1] = dfds[idx].then(lang.hitch(this, function() {
return this.confirmNumFileLimit(this.maxNumFiles);
}));
}
dfds[dfds.length - 1].then(lang.hitch(this, function() {
this.createBars();
this.uploadFiles();
dfds = null; // free memory
}));
},
/**
* Creates a progress bar for each file and uploads it.
*/
createBars: function() {
var self = this;
var container, div, strTemplate;
var barOverall = this.barOverall;
var i = 0, len = this.files.length;
if (len === 0) {
return false;
}
// create fileUploader container
strTemplate = '<div id="pbwOverallCont">' +
'<div id="pbwBarOverall" class="pbwBar">' +
'<div class="pbwTxt">Progression totale</div>' +
'</div>' +
'</div>' +
'<div id="pbwBarsCont"></div>';
// display inside dialog pane
if (!this.displayTarget) {
container = new Dialog({
id: 'snetUploader',
title: 'Transfert sur le serveur',
content: strTemplate,
duration: 500,
onHide: function() {
window.setTimeout(function() {
container.destroyRecursive();
}, container.get('duration') + 20);
}
});
container.show();
}
// display inside target element
else {
container = domConstruct.create('div', {
id: 'snetUploader',
innerHTML: strTemplate
}, this.displayTarget)
}
// create progress bar for overall progress
div = domConstruct.create('div', null, 'pbwBarOverall');
barOverall = new ProgressBar({
maximum: this.bytesOverall,
value: 0
}, div);
// create containers for individual progress bars
for (; i < len; i++) {
(function(i) {
var bar, file = self.files[i];
div = domConstruct.create('div', null, 'pbwBarsCont');
bar = new UploadProgressBar({
text: file.name + ', ' + self.formatSize(file.size),
bytesTotal: file.size,
maximum: file.size,
value: 0
}, div);
bar.setIcon(file, 64);
bar.watch('value', function(valName, valOld, valNew) {
var stat, inc;
if (valNew != Infinity && valOld != Infinity) {
inc = valNew - valOld + barOverall.get('value');
barOverall.set('value', inc);
}
else if (valNew == Infinity) {
stat = self.fileStatus;
stat.numProgressDone++;
if (stat.numProgressDone + stat.numAborted === len) {
barOverall.set('value', Infinity);
}
}
});
aspect.after(bar, 'onComplete', function() {
// todo: use bar.watch instead as above
var stat = self.fileStatus;
stat.numCompleted++;
if (stat.numCompleted + stat.numAborted === len) {
domClass.add(query('.dijitProgressBarTile', barOverall.domNode)[0], 'pbwBarTileDone');
barOverall.set('value', barOverall.maximum);
}
});
aspect.after(bar, 'onRetry', function() {
self.resume(file, this);
});
aspect.after(bar, 'onResume', function() {
self.resume(file, this);
});
aspect.after(bar, 'onPause', function() {
if (bar.xhr) {
bar.xhr.abort();
}
});
aspect.after(bar, 'onDelete', function() {
var dfd = self.del(file, bar);
dfd.then(function() {
self.progressBars[i] = null;
self.files[i] = null;
self.remove(container);
});
});
aspect.after(bar, 'onAbort', function() {
// we can't just use bar.xhr.abort(); since part of the file will still be written to disk on server
// => init abort on server first
self.abort(file, bar);
self.progressBars[i] = null;
self.files[i] = null;
});
aspect.after(bar, 'onRemove', function() {
self.remove(container);
});
self.progressBars[i] = bar;
})(i);
}
this.barOverall = barOverall;
},
/**
* Shows a dialog to confirm skipping files that are to big.
* @param {String} fileName name of file
* @return {dojo/_base/Deferred}
*/
confirmFileSize: function(fileName) {
var dialog = registry.byId('dialogFileSize') || new DialogConfirm({
id: 'dialogFileSize',
title: 'Confirm',
content: '<p>Maximum file size is limited to ' + this.formatSize(this.maxKBytes) + '.</p>' +
'<p>Press \'OK\' to skip file ' + fileName + '<br/>or press \'Cancel\' to cancel uploading.</p>'
});
return dialog.show();
},
/**
* Shows a dialog to confirm not uploading file that is to big (only one file overall).
* Used only when there is a single file to upload.
* @param {String} fileName name of file
* @return {dojo/_base/Deferred}
*/
confirmFileSizeSingle: function(fileName) {
var dialog = registry.byId('dialogFileSizeSingle') || new DialogConfirm({
id: 'dialogFileSizeSingle',
title: 'Confirm',
content: 'Maximum file size is limited to ' + this.formatSize(this.maxKBytes) + '. Uploading file ' +
fileName + ' will be canceled.</p>',
hasCancelButton: false,
hasSkipCheckBox: false
});
return dialog.show();
},
/**
* Shows a dialog to confirm skipping the remaining files.
* If the limit of number of files that can be uploaded is reached, the user can decide to skip the remaining files.
* @param {number} limit maximum number of files that can be uploaded
* @return {dojo/_base/Deferred}
*/
confirmNumFileLimit: function(limit) {
var dialog = registry.byId('dialogNumFileLimit') || new DialogConfirm({
id: 'dialogNumFileLimit',
title: 'Confirm',
content: '<p>Maximum number of files to upload is limited to ' + limit + '.</p>' +
'<p>Press \'OK\' to upload only the first ' + limit + ' files<br/>or press \'Cancel\' to cancel uploading.</p>',
hasSkipCheckBox: false
});
return dialog.show();
},
/**
* Displays a dialog to confirm deleting a file.
* @param {string} fileName name of file to delete
* @return {dojo/_base/Deferred}
*/
confirmDelete: function(fileName) {
var dialog = registry.byId('dialogDelete') || new DialogConfirm({
id: 'dialogDelete',
title: 'Delete',
content: '<p>Do you want to delete the uploaded file ' + fileName + ' on the remote server?</p>' +
'<p>Press \'OK\' to delete<br/>or press \'Cancel\' to cancel.</p>',
hasSkipCheckBox: true
});
return dialog.show();
},
/**
* Displays a dialog to confirm that current browser is not supported.
* @return {dojo/_base/Deferred}
*/
confirmHasFeatures: function() {
var dialog = registry.byId('dialogHasFeatures') || new DialogConfirm({
id: 'dialogHasFeatures',
title: 'Wrong browser',
hasCancelButton: false,
hasSkipCheckBox: false,
content: '<p>Your browser doesn\'t support HTML5 multiple drag and drop upload. Consider downloading Mozilla Firefox.</p>'
});
return dialog.show();
},
/**
* Removes the overall bar.
*/
remove: function(container) {
var someLeft = array.some(this.files, function(item) {
return item !== null;
});
if (!someLeft) {
window.setTimeout(function() { // TODO: check if this is really necessary
// since we might be in progress of already hiding another dialog
container.hide();
}, container.get('duration') + 20)
}
},
/**
* Upload all dropped files that don't exceed size and number of files limit.
*/
uploadFiles: function() {
var i = 0, len = this.files.length;
for (; i < len; i++) {
// this.saveToDb(this.files[i]);
this.upload(this.files[i], this.progressBars[i]);
}
},
/**
* Upload file via XmlHttpRequest.
* Reads file into binary string and uploads it while displays its progress.
* @param {File} file file to upload
* @param {snet.fileUploader.ProgressBar} bar progress bar
*/
upload: function(file, bar) {
// Use native XMLHttpRequest instead of XhrGet since dojo 1.5 does not allow to send binary data as per docs
var req = bar.xhr = new XMLHttpRequest();
var dfd = this.setReadyStateChangeEvent(req, bar);
this.setProgressEvent(req, bar);
bar.upload();
if(this.url.indexOf("?") != "-1"){
var elem_param="&";
}else{
var elem_param="?";
}
req.open('post', this.url + elem_param + 'fnc=upl', true);
req.setRequestHeader("Cache-Control", "no-cache");
req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
req.setRequestHeader("X-File-Name", file.name);
req.setRequestHeader("X-File-Size", file.size);
req.send(file);
return dfd;
},
/**
* Displays upload status and errors.
* @param {XMLHttpRequest} req
* @param {snet.fileUploader.ProgressBar} bar
*/
setReadyStateChangeEvent: function(req, bar) {
var dfd = new Deferred();
on(req, 'readystatechange', lang.hitch(this, function() {
var err = null;
if (req.readyState == 4) {
// upload finished successful
if (req.status == 200 || req.status == 201) {
//window.setTimeout(function() {
bar.complete();
dfd.resolve();
if(this.append_div){
dojo.place(req.responseText,this.append_div);
}
//}, 500);
}
else {
// server error or user aborted (canceled)
if (req.status === 0 && (bar.aborted || bar.paused)) {
// User canceled or paused upload. Not an error.
dfd.resolve();
}
else {
err = {
statusCode: req.status,
statusText: req.statusText,
responseText: req.responseText
};
if (req.statusText == '') {
err.responseText = 'Unknown error.';
}
bar.error(err);
dfd.reject();
this.fileStatus.numError++;
}
}
req = null;
bar.xhr = null;
}
}));
return dfd;
},
/**
* Setup the progress event to display upload progress.
* @param {XMLHttpRequest} req
* @param {snet/fileUploader/ProgressBar} bar
* @param {number} [resumeStart]
*/
setProgressEvent: function(req, bar, resumeStart) {
var cnn = on(req.upload, 'progress', function(evt) {
var loaded = evt.loaded + (resumeStart || 0);
if (evt.lengthComputable) {
//var num = Math.round((evt.total - loaded) / evt.total * 1000);
var num = Math.round(loaded / evt.total * 100); // find better measure, see below
bar.set('value', loaded);
if (num == 100 && (!arguments.callee.done === true)) {
// TODO: find better ways to decide when we switch to indeterminate
// in FF4 never evt.loaded == bar.maximum, but in chrome
// see https://bugzilla.mozilla.org/show_bug.cgi?id=637002
arguments.callee.done = true;
cnn.remove(); // make sure this only gets called once per bar after upload is completed
bar.wait(); // upload is complete but file has not been written to disk, waits for status 200
}
}
});
},
/**
* Sends request to delete file on remote server.
* @param {string} fileName name of file to delete
* @param {snet/fileUploader/ProgressBar} bar
* @return {dojo/_base/Deferred}
*/
deleteFile: function(fileName, bar) {
return xhr.get({
url: this.url,
content: {
fnc: 'del',
fileName: fileName
},
failOk: true,
error: function(err, ioArgs) {
bar.error({
statusCode: ioArgs.xhr.status,
statusText: ioArgs.xhr.statusText,
responseText: err.responseText
});
}
});
},
/**
* Deletes the uploaded file and removes the bar from the list.
* @param {File} file
* @param {snet.fileUploader.ProgressBar} bar
*/
del: function(file, bar) {
var self = this;
var dfd = new Deferred();
var fileName = file.name || file.fileName;
dfd.resolve(self.rememberConfirmDelete);
dfd = dfd.then(
function(remember) {
if (remember === false) {
return self.confirmDelete(fileName);
}
}).then(
function(remember) {
self.rememberConfirmDelete = remember;
return self.deleteFile(fileName, bar);
}).then(function() {
bar.remove();
});
return dfd;
},
/**
* Aborts the upload.
* @param {File} file
* @param {snet.fileUploader.ProgressBar} bar
*/
abort: function(file, bar) {
if (bar.xhr) {
bar.xhr.abort();
}
this.fileStatus.numAborted++;
var inc = bar.maximum - bar.value;
this.barOverall.set('value', this.barOverall.value + inc);
window.setTimeout(lang.hitch(this, function() {
// after aborting some bytes of the file might still be written to the disk on the server,
// Unfortunately the delete request cant be sent right away, since there is some lag on the server
// (file is not written yet) and the delete would create a 404.
// Ugly, but I just do a the best guess of a 2sec delay to send the delete
this.deleteFile(file.name || file.fileName, bar);
bar.xhr = null;
bar = null;
}), 2000);
},
resume: function(file, bar) {
// Since we do not write anything to disk in this demo, we can't check the size of the partially written file
// on the server before continuing, instead we just use the local progress (which of course is not reliable, since
// we do not know how much was still sent and saved on the server -> in a realworld app use the extra xhr to server)
var dfd = null;
if (!this.hasBlobSliceSupport(file)) {
var dialog = registry.byId('dialogHasBlobSliceSupport') || new DialogConfirm({
id: 'dialogHasBlobSliceSupport',
title: 'Wrong browser',
hasCancelButton: false,
hasSkipCheckBox: false,
content: '<p>Your browser does not support resuming uploads.</p>'
});
dialog.show();
}
dom.byId(bar.id + '_msg').innerHTML = 'Resuming...';
// Get number of bytes from server which have already been written to the server
// This is not possible in demo, since nothing has been written to disk, server will just send nada
dfd = xhr.get({
url: this.url,
handleAs: 'json',
content: {
fnc: 'getNumWrittenBytes',
fileName: file.name || file.fileName
},
failOk: true,
error: function(err, ioArgs) {
bar.error({
statusCode: ioArgs.xhr.status,
statusText: ioArgs.xhr.statusText,
responseText: err.responseText
});
}
});
dfd.then(lang.hitch(this, function(result) {
// Blob.slice is temporarily prefixed in Firefox now, because of changed syntax from start, length to start, end
var dfd, chunk;
var start = (result && result.numWritten) || bar.value; // bar.value for demo only
var length = file.size - start;
var req = bar.xhr = new XMLHttpRequest();
if ('mozSlice' in file) {
chunk = file.mozSlice(start, file.size); // new parameters start, end instead of length
}
else {
chunk = file.slice(start, length);
}
dfd = this.setReadyStateChangeEvent(req, bar);
this.setProgressEvent(req, bar, start);
bar.upload();
if(this.url.indexOf("?") != "-1"){
var elem_param="&";
}else{
var elem_param="?";
}
req.open('post', this.url + elem_param + 'fnc=resume', true);
req.setRequestHeader("Cache-Control", "no-cache");
req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
req.setRequestHeader("X-File-Name", file.name);
req.setRequestHeader("X-File-Size", file.size);
req.send(chunk);
return dfd;
}));
return dfd;
},
/**
* Resets the fileUploader.
*/
reset: function() {
this.bytesOverall = 0;
this.barOverall = null;
this.fileStatus = {
numCompleted: 0,
numAborted: 0,
numProgressDone: 0,
numError: 0
};
this.files = [];
this.progressBars = [];
},
/**
* Format file size.
* @param {Number} bytes
*/
formatSize: function(bytes) {
var str = ['bytes', 'kb', 'MB', 'GB', 'TB', 'PB'];
var num = Math.floor(Math.log(bytes) / Math.log(1024));
bytes = bytes === 0 ? 0 : (bytes / Math.pow(1024, Math.floor(num))).toFixed(1) + ' ' + str[num];
return bytes;
},
/**
* Check if browser supports necessary features for the uploader to work.
*/
hasFeatures: function() {
// test taken from has.js
if (has.add('dnd', function(global, document, anElement) {
return 'draggable' in document.createElement('span');
}, true) && has.add('file-api', function(global, document, anElement) {
return typeof FileReader != 'undefined';
}, true) && has.add('native-xhr-uploadevents', function(global, document, anElement) {
return has("native-xhr") && ("upload" in new XMLHttpRequest);
}, true)) {
return true
}
else {
return false;
}
},
hasBlobSliceSupport: function(file) {
// file.slice is not supported by FF3.6 and is prefixed in FF5 now
return ('slice' in file || 'mozSlice' in file);
}
});
});