Skip to content
Snippets Groups Projects
Commit d41e7226 authored by Jörn Friedrich Dreyer's avatar Jörn Friedrich Dreyer
Browse files

refactor upload progress

parent 46f59b16
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
apps/files/js/file-upload.js
+ 173
− 135
View file @ d41e7226
$(document).ready(function() {
var file_upload_param = { /**
dropZone: $('#content'), // restrict dropZone to content div * Function that will allow us to know if Ajax uploads are supported
//singleFileUploads is on by default, so the data.files array will always have length 1 * @link https://github.com/New-Bamboo/example-ajax-upload/blob/master/public/index.html
add: function(e, data) { * also see article @link http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata
*/
function supportAjaxUploadWithProgress() {
return supportFileAPI() && supportAjaxUploadProgressEvents() && supportFormData();
if(data.files[0].type === '' && data.files[0].size == 4096) // Is the File API supported?
{ function supportFileAPI() {
data.textStatus = 'dirorzero'; var fi = document.createElement('INPUT');
data.errorThrown = t('files','Unable to upload your file as it is a directory or has 0 bytes'); fi.type = 'file';
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); return 'files' in fi;
fu._trigger('fail', e, data); };
return true; //don't upload this file but go on with next in queue
}
var totalSize=0; // Are progress events supported?
$.each(data.originalFiles, function(i,file){ function supportAjaxUploadProgressEvents() {
totalSize+=file.size; var xhr = new XMLHttpRequest();
}); return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
};
if(totalSize>$('#max_upload').val()){ // Is FormData supported?
data.textStatus = 'notenoughspace'; function supportFormData() {
data.errorThrown = t('files','Not enough space available'); return !! window.FormData;
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); }
fu._trigger('fail', e, data); }
return false; //don't upload anything
} $(document).ready(function() {
// start the actual file upload if ( $('#file_upload_start').length ) {
var jqXHR = data.submit(); var file_upload_param = {
dropZone: $('#content'), // restrict dropZone to content div
//singleFileUploads is on by default, so the data.files array will always have length 1
add: function(e, data) {
// remember jqXHR to show warning to user when he navigates away but an upload is still in progress if(data.files[0].type === '' && data.files[0].size == 4096)
if (typeof data.context !== 'undefined' && data.context.data('type') === 'dir') { {
var dirName = data.context.data('file'); data.textStatus = 'dirorzero';
if(typeof uploadingFiles[dirName] === 'undefined') { data.errorThrown = t('files','Unable to upload your file as it is a directory or has 0 bytes');
uploadingFiles[dirName] = {}; var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
fu._trigger('fail', e, data);
return true; //don't upload this file but go on with next in queue
} }
uploadingFiles[dirName][data.files[0].name] = jqXHR;
} else {
uploadingFiles[data.files[0].name] = jqXHR;
}
//show cancel button var totalSize=0;
if($('html.lte9').length === 0 && data.dataType !== 'iframe') { $.each(data.originalFiles, function(i,file){
$('#uploadprogresswrapper input.stop').show(); totalSize+=file.size;
} });
},
submit: function(e, data) { if(totalSize>$('#max_upload').val()){
if ( ! data.formData ) { data.textStatus = 'notenoughspace';
// noone set update parameters, we set the minimum data.errorThrown = t('files','Not enough space available');
data.formData = { var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
requesttoken: oc_requesttoken, fu._trigger('fail', e, data);
dir: $('#dir').val() return false; //don't upload anything
};
}
},
/**
* called after the first add, does NOT have the data param
* @param e
*/
start: function(e) {
//IE < 10 does not fire the necessary events for the progress bar.
if($('html.lte9').length > 0) {
return;
}
$('#uploadprogressbar').progressbar({value:0});
$('#uploadprogressbar').fadeIn();
},
fail: function(e, data) {
if (typeof data.textStatus !== 'undefined' && data.textStatus !== 'success' ) {
if (data.textStatus === 'abort') {
$('#notification').text(t('files', 'Upload cancelled.'));
} else {
// HTTP connection problem
$('#notification').text(data.errorThrown);
} }
$('#notification').fadeIn();
//hide notification after 5 sec
setTimeout(function() {
$('#notification').fadeOut();
}, 5000);
}
delete uploadingFiles[data.files[0].name];
},
progress: function(e, data) {
// TODO: show nice progress bar in file row
},
progressall: function(e, data) {
//IE < 10 does not fire the necessary events for the progress bar.
if($('html.lte9').length > 0) {
return;
}
var progress = (data.loaded/data.total)*100;
$('#uploadprogressbar').progressbar('value',progress);
},
/**
* called for every successful upload
* @param e
* @param data
*/
done:function(e, data) {
// handle different responses (json or body from iframe for ie)
var response;
if (typeof data.result === 'string') {
response = data.result;
} else {
//fetch response from iframe
response = data.result[0].body.innerText;
}
var result=$.parseJSON(response);
if(typeof result[0] !== 'undefined' && result[0].status === 'success') { // start the actual file upload
var filename = result[0].originalname; var jqXHR = data.submit();
// delete jqXHR reference // remember jqXHR to show warning to user when he navigates away but an upload is still in progress
if (typeof data.context !== 'undefined' && data.context.data('type') === 'dir') { if (typeof data.context !== 'undefined' && data.context.data('type') === 'dir') {
var dirName = data.context.data('file'); var dirName = data.context.data('file');
delete uploadingFiles[dirName][filename]; if(typeof uploadingFiles[dirName] === 'undefined') {
if ($.assocArraySize(uploadingFiles[dirName]) == 0) { uploadingFiles[dirName] = {};
delete uploadingFiles[dirName];
} }
uploadingFiles[dirName][data.files[0].name] = jqXHR;
} else { } else {
delete uploadingFiles[filename]; uploadingFiles[data.files[0].name] = jqXHR;
} }
var file = result[0]; },
} else { submit: function(e, data) {
data.textStatus = 'servererror'; if ( ! data.formData ) {
data.errorThrown = t('files', result.data.message); // noone set update parameters, we set the minimum
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); data.formData = {
fu._trigger('fail', e, data); requesttoken: oc_requesttoken,
} dir: $('#dir').val()
}, };
/** }
* called after last upload },
* @param e /**
* @param data * called after the first add, does NOT have the data param
*/ * @param e
stop: function(e, data) { */
if(data.dataType !== 'iframe') { start: function(e) {
$('#uploadprogresswrapper input.stop').hide(); },
} fail: function(e, data) {
if (typeof data.textStatus !== 'undefined' && data.textStatus !== 'success' ) {
if (data.textStatus === 'abort') {
$('#notification').text(t('files', 'Upload cancelled.'));
} else {
// HTTP connection problem
$('#notification').text(data.errorThrown);
}
$('#notification').fadeIn();
//hide notification after 5 sec
setTimeout(function() {
$('#notification').fadeOut();
}, 5000);
}
delete uploadingFiles[data.files[0].name];
},
/**
* called for every successful upload
* @param e
* @param data
*/
done:function(e, data) {
// handle different responses (json or body from iframe for ie)
var response;
if (typeof data.result === 'string') {
response = data.result;
} else {
//fetch response from iframe
response = data.result[0].body.innerText;
}
var result=$.parseJSON(response);
if(typeof result[0] !== 'undefined' && result[0].status === 'success') {
var filename = result[0].originalname;
//IE < 10 does not fire the necessary events for the progress bar. // delete jqXHR reference
if($('html.lte9').length > 0) { if (typeof data.context !== 'undefined' && data.context.data('type') === 'dir') {
return; var dirName = data.context.data('file');
delete uploadingFiles[dirName][filename];
if ($.assocArraySize(uploadingFiles[dirName]) == 0) {
delete uploadingFiles[dirName];
}
} else {
delete uploadingFiles[filename];
}
var file = result[0];
} else {
data.textStatus = 'servererror';
data.errorThrown = t('files', result.data.message);
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
fu._trigger('fail', e, data);
}
},
/**
* called after last upload
* @param e
* @param data
*/
stop: function(e, data) {
} }
};
// initialize jquery fileupload (blueimp)
var fileupload = $('#file_upload_start').fileupload(file_upload_param);
window.file_upload_param = fileupload;
if(supportAjaxUploadWithProgress()) {
$('#uploadprogressbar').progressbar('value',100); // add progress handlers
$('#uploadprogressbar').fadeOut(); fileupload.on('fileuploadadd', function(e, data) {
//show cancel button
//if(data.dataType !== 'iframe') { //FIXME when is iframe used? only for ie?
// $('#uploadprogresswrapper input.stop').show();
//}
});
// add progress handlers
fileupload.on('fileuploadstart', function(e, data) {
$('#uploadprogresswrapper input.stop').show();
$('#uploadprogressbar').progressbar({value:0});
$('#uploadprogressbar').fadeIn();
});
fileupload.on('fileuploadprogress', function(e, data) {
//TODO progressbar in row
});
fileupload.on('fileuploadprogressall', function(e, data) {
var progress = (data.loaded / data.total) * 100;
$('#uploadprogressbar').progressbar('value', progress);
});
fileupload.on('fileuploadstop', function(e, data) {
$('#uploadprogresswrapper input.stop').fadeOut();
$('#uploadprogressbar').fadeOut();
});
fileupload.on('fileuploadfail', function(e, data) {
//if user pressed cancel hide upload progress bar and cancel button
if (data.errorThrown === 'abort') {
$('#uploadprogresswrapper input.stop').fadeOut();
$('#uploadprogressbar').fadeOut();
}
});
} else {
console.log('skipping file progress because your browser is broken');
} }
}; }
$('#file_upload_start').fileupload(file_upload_param);
$.assocArraySize = function(obj) { $.assocArraySize = function(obj) {
// http://stackoverflow.com/a/6700/11236 // http://stackoverflow.com/a/6700/11236
var size = 0, key; var size = 0, key;
...@@ -353,5 +392,4 @@ $(document).ready(function() { ...@@ -353,5 +392,4 @@ $(document).ready(function() {
$('#new>a').click(); $('#new>a').click();
}); });
}); });
window.file_upload_param = file_upload_param;
}); });
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