diff --git a/openbis/source/java/ch/systemsx/cisd/openbis/public/resources/js/openbis.js b/openbis/source/java/ch/systemsx/cisd/openbis/public/resources/js/openbis.js index e59ce9cb1c983e67c282369ef0f2f6ddb556f189..2d2fd500fde7987c5f0804a82689b8ce7520263a 100644 --- a/openbis/source/java/ch/systemsx/cisd/openbis/public/resources/js/openbis.js +++ b/openbis/source/java/ch/systemsx/cisd/openbis/public/resources/js/openbis.js @@ -1448,7 +1448,7 @@ openbis.prototype.getDownloadUrlForFileForDataSetWithTimeout = function(dataSetC * @method */ openbis.prototype.createSessionWorkspaceUploader = function(uploaderContainer, oncomplete, uploaderSettings){ - return this.createSessionWorkspaceUploaderForDataStore(uploaderContainer, null, oncomplete, uploaderSettings); + this.createSessionWorkspaceUploaderForDataStore(uploaderContainer, null, oncomplete, uploaderSettings); } /** @@ -1464,15 +1464,14 @@ openbis.prototype.createSessionWorkspaceUploaderForDataStore = function(uploader } var $this = this; - - // figure out what is the location of the openbis.js script and assume that uploader resources are served by the same server - var openbisScriptLocation = $('script[src*=openbis\\.js]').attr('src'); - var uploaderDirectoryLocation = jsFileLocation = openbisScriptLocation.replace(/js\/openbis\.js/g, 'uploader'); - - $('head').append('<link rel="stylesheet" media="screen" type="text/css" href="' + uploaderDirectoryLocation + '/css/src/upload.css" />'); - $('head').append('<script charset="utf-8" type="text/javascript" src="' + uploaderDirectoryLocation + '/js/src/upload.js" />'); - var uploader = new Uploader(); this._internal.getDataStoreUrlForDataStoreCode(dataStoreCodeOrNull, function(dataStoreUrl){ + // figure out what is the location of the openbis.js script and assume that uploader resources are served by the same server + var openbisScriptLocation = $('script[src*=openbis\\.js]').attr('src'); + var uploaderDirectoryLocation = jsFileLocation = openbisScriptLocation.replace(/js\/openbis\.js/g, 'uploader'); + + $('head').append('<link rel="stylesheet" media="screen" type="text/css" href="' + uploaderDirectoryLocation + '/css/src/upload.css" />'); + $('head').append('<script charset="utf-8" type="text/javascript" src="' + uploaderDirectoryLocation + '/js/src/upload.js" />'); + $(uploaderContainer).load(uploaderDirectoryLocation + "/index.html", function(){ var finalSettings = { smart_mode: true, @@ -1487,10 +1486,9 @@ openbis.prototype.createSessionWorkspaceUploaderForDataStore = function(uploader for(var key in uploaderSettings) { finalSettings[key] = uploaderSettings[key]; } - uploader.init(finalSettings); + Uploader.init(finalSettings); }); }); - return uploader; } /** diff --git a/openbis/source/java/ch/systemsx/cisd/openbis/public/resources/uploader/js/src/upload.js b/openbis/source/java/ch/systemsx/cisd/openbis/public/resources/uploader/js/src/upload.js index 77921f105caf43c82aa5df31e8e84657d3f637a4..900e9cf740152748b634c8bce4748dbe669159af 100644 --- a/openbis/source/java/ch/systemsx/cisd/openbis/public/resources/uploader/js/src/upload.js +++ b/openbis/source/java/ch/systemsx/cisd/openbis/public/resources/uploader/js/src/upload.js @@ -15,8 +15,9 @@ Copyright 2012 Oliver Lau, Heise Zeitschriften Verlag limitations under the License. */ -function Uploader() { - this.defaults = { + +var Uploader = new function () { + var defaults = { upload_dir: "/uploaded", file_upload_url: "/uploader2/upload.php", form_upload_url: "/uploader2/form-upload.php", @@ -35,35 +36,39 @@ function Uploader() { uploads_title : "<h2>Uploads</h2>" }; - var _this = this; - this.current_upload_id = 0; - this.current_form_id = 0; - this.progress = {}; -// var form = {}; - this.settings = this.defaults; - - this.reset = function() { - _this.current_upload_id = 0; - _this.current_form_id = 0; - _this.progress = {}; - $(_this.settings.file_list).removeClass("visible"); + + var current_upload_id = 0; + var current_form_id = 0; + var progress = {}; + var form = {}; + var settings = defaults; + + + function reset() { + current_upload_id = 0; + current_form_id = 0; + progress = {}; + $(settings.file_list).removeClass("visible"); //$(settings.file_list_clear_button).css("display", "none"); setTimeout(function() { - $(_this.settings.file_list).empty(); + $(settings.file_list).empty(); }, 256); } - this.async_exec = function(f, ms) { + + function async_exec(f, ms) { ms = ms || 100; setTimeout(f, ms); } + this.uploadsInProgress = function() { - return Object.keys(_this.progress).length > 0; + return Object.keys(progress).length > 0; } + // function clearFileList() { -// if (uploadsInProgress()) { +// if (this.uploadsInProgress()) { // $(".ready").addClass("fadeOut"); // $(".bad").addClass("fadeOut"); // $(".aborted").addClass("fadeOut"); @@ -78,7 +83,8 @@ function Uploader() { // } // } - this.styleSize = function(n) { + + function styleSize(n) { var prefixes = [ "KB", "MB", "GB" ]; var prefix = "bytes"; while (n > 10240 && prefixes.length > 0) { @@ -88,7 +94,8 @@ function Uploader() { return Math.round(n) + " " + prefix; } - this.makeChunk = function(file, startByte, endByte) { + + function makeChunk(file, startByte, endByte) { var blob = undefined; if (file.slice) blob = file.slice(startByte, endByte); @@ -99,98 +106,103 @@ function Uploader() { return blob; } - this.resumeUpload = function(id) { - _this.progress[id].pause = false; - _this.progress[id].abort = false; + + function resumeUpload(id) { + progress[id].pause = false; + progress[id].abort = false; $("#play-button-" + id).remove(); $("#pause-button").clone().attr("id", "pause-button-" + id) .appendTo("#action-bar-" + id) .click(function() { - _this.pauseUpload(id); + pauseUpload(id); }); - var startByte = _this.progress[id].bytesSent; - var endByte = startByte + this.settings.chunk_size; - if (endByte > _this.progress[id].file.size) - endByte = _this.progress[id].file.size; - var blob = _this.makeChunk(_this.progress[id].file, startByte, endByte); - _this.uploadChunk(_this.progress[id].file, blob, id, startByte, endByte); + var startByte = progress[id].bytesSent; + var endByte = startByte + settings.chunk_size; + if (endByte > progress[id].file.size) + endByte = progress[id].file.size; + var blob = makeChunk(progress[id].file, startByte, endByte); + uploadChunk(progress[id].file, blob, id, startByte, endByte); } - this.abortUpload = function(id) { - _this.progress[id].abort = true; - _this.progress[id].xhr.abort(); + + function abortUpload(id) { + progress[id].abort = true; + progress[id].xhr.abort(); } - this.deleteFile = function(id) { + + function deleteFile(id) { $.ajax("delete-file.php", { async: true, data: { id: id, - filename: _this.progress[id].file.name + filename: progress[id].file.name } }).done(function(data) { $("#upload-" + id).addClass("deleted"); }); } - this.pauseUpload = function(id) { - _this.progress[id].pause = true; + + function pauseUpload(id) { + progress[id].pause = true; $("#pause-button-" + id).remove(); $("#play-button").clone().attr("id", "play-button-" + id) .appendTo("#action-bar-" + id) .click(function() { - _this.resumeUpload(id); + resumeUpload(id); }); } - this.uploadChunk = function(file, blob, id, startByte, endByte) { - if (typeof _this.progress[id] === "undefined" || _this.progress[id].abort || _this.progress[id].pause) + + function uploadChunk(file, blob, id, startByte, endByte) { + if (typeof progress[id] === "undefined" || progress[id].abort || progress[id].pause) return; var reader = new FileReader; reader.onload = function(e) { if (e.target.readyState == FileReader.DONE) { - if (typeof _this.progress[id] === "undefined") + if (typeof progress[id] === "undefined") return; var xhr = new XMLHttpRequest; - _this.progress[id].xhr = xhr; + progress[id].xhr = xhr; // pkupczyk: added sessionID - xhr.open("POST", _this.settings.file_upload_url + + xhr.open("POST", settings.file_upload_url + "?filename=" + file.name + "&id=" + id + "&startByte=" + startByte + "&endByte=" + endByte + - "&sessionID=" + _this.settings.sessionID, + "&sessionID=" + settings.sessionID, true); xhr.onload = function(e) { var d = JSON.parse(xhr.responseText); - if (typeof _this.progress[d.id] === "undefined") + if (typeof progress[d.id] === "undefined") return; if (d.status === "ok") { - _this.progress[d.id].bytesSent += d.endByte - d.startByte; - var secs = 1e-3 * (Date.now() - _this.progress[d.id].startTime); - if (_this.progress[d.id].bytesSent < file.size) { - var percentage = 100 * _this.progress[d.id].bytesSent / file.size; + progress[d.id].bytesSent += d.endByte - d.startByte; + var secs = 1e-3 * (Date.now() - progress[d.id].startTime); + if (progress[d.id].bytesSent < file.size) { + var percentage = 100 * progress[d.id].bytesSent / file.size; $("#progressbar-" + d.id).css("width", percentage + "%"); - $("#speed-" + d.id).html(_this.styleSize(_this.progress[d.id].bytesSent / secs) + "/s"); + $("#speed-" + d.id).html(styleSize(progress[d.id].bytesSent / secs) + "/s"); startByte = endByte; - endByte += _this.settings.chunk_size; + endByte += settings.chunk_size; if (endByte > file.size) endByte = file.size; - var blob = _this.makeChunk(file, startByte, endByte); - _this.uploadChunk(file, blob, id, startByte, endByte); + var blob = makeChunk(file, startByte, endByte); + uploadChunk(file, blob, id, startByte, endByte); } else { $("#progressbar-" + d.id).addClass("ready"); $("#progressbar-" + d.id).css("width", "100%"); $("#upload-" + d.id).addClass("ready"); - $("#speed-" + d.id).html(_this.styleSize(file.size / secs) + "/s"); + $("#speed-" + d.id).html(styleSize(file.size / secs) + "/s"); // pkupczyk: changed download url $("#filename-" + d.id).replaceWith("<a target=\"_blank\" " + - "href=\"" + _this.settings.file_download_url + "?sessionID=" + _this.settings.sessionID + "&filePath=" + + "href=\"" + settings.file_download_url + "?sessionID=" + settings.sessionID + "&filePath=" + d.filename + "\">" + d.filename + "</a>"); $("#action-bar-" + d.id).remove(); - delete _this.progress[d.id]; - _this.settings.oncomplete(file); + delete progress[d.id]; + settings.oncomplete(file); } } else { @@ -198,22 +210,22 @@ function Uploader() { $("#upload-" + d.id).addClass("bad"); $("#speed-" + d.id).replaceWith("<strong>" + d.message + "</strong>"); $("#action-bar-" + d.id).remove(); - delete _this.progress[d.id]; + delete progress[d.id]; } }; xhr.onabort = function(e) { $("#progressbar-" + id).addClass("aborted"); $("#upload-" + id).addClass("aborted"); $("#action-bar-" + id).remove(); - _this.deleteFile(id); - delete _this.progress[id]; + deleteFile(id); + delete progress[id]; }; xhr.onerror = function(e) { $("#progressbar-" + id).addClass("bad"); $("#upload-" + id).addClass("bad"); $("#action-bar-" + id).remove(); - _this.deleteFile(id); - delete _this.progress[id]; + deleteFile(id); + delete progress[id]; }; xhr.send(e.target.result); } @@ -240,32 +252,33 @@ function Uploader() { reader.readAsArrayBuffer(blob); } - this.upload = function(file) { - var id = _this.current_upload_id; - ++_this.current_upload_id; - $(_this.settings.file_list) + + function upload(file) { + var id = current_upload_id; + ++current_upload_id; + $(settings.file_list) .append("<li class=\"upload\" id=\"upload-" + id + "\">" + "<span id=\"progress-" + id + "\" class=\"progressbar-container\">" + "<span id=\"progressbar-" + id + "\" class=\"progressbar\"></span>" + "</span>" + "<span id=\"action-bar-" + id + "\"></span> " + "<span id=\"filename-" + id + "\">" + file.name + "</span>" + - " (" + _this.styleSize(file.size) + ", " + + " (" + styleSize(file.size) + ", " + "<span id=\"speed-" + id + "\">? KB/s</span>)" + "</li>"); $("#upload-" + id).addClass("starting"); - if (_this.settings.smart_mode) { + if (settings.smart_mode) { $("#stop-button").clone().attr("id", "stop-button-" + id) .appendTo("#action-bar-" + id) .click(function() { - _this.abortUpload(id); + abortUpload(id); }); $("#pause-button").clone().attr("id", "pause-button-" + id) .appendTo("#action-bar-" + id) .click(function() { - _this.pauseUpload(id); + pauseUpload(id); }); - _this.progress[id] = { + progress[id] = { file: file, startTime: Date.now(), bytesSent: 0, @@ -274,31 +287,33 @@ function Uploader() { xhr: null }; // 1. Chunk will be uploaded, further chunks will be uploaded via onload-Handler - var lastByte = (file.size < this.settings.chunk_size)? file.size : this.settings.chunk_size; - var blob = _this.makeChunk(file, 0, lastByte); - _this.uploadChunk(file, blob, id, 0, lastByte); + var lastByte = (file.size < settings.chunk_size)? file.size : settings.chunk_size; + var blob = makeChunk(file, 0, lastByte); + uploadChunk(file, blob, id, 0, lastByte); } else { $("#progressbar-" + id).css("width", "100%"); } } - this.uploadFiles = function(files) { - $(_this.settings.file_list).addClass("visible"); + + function uploadFiles(files) { + $(settings.file_list).addClass("visible"); //$(settings.file_list_clear_button).css("display", "inline"); if (typeof files === "object" && files.length > 0) { - $.each(files, function() { _this.upload(this); }); + $.each(files, function() { upload(this); }); } } - this.generateUploadForm = function() { - var id = ++_this.current_form_id; + + function generateUploadForm() { + var id = ++current_form_id; $("#iframe-container") // pkupczyk: added sessionID .append("<iframe id=\"iframe-" + id + "\"" + " name=\"iframe-" + id + "\"" + "></iframe>" + - "<form action=\"" + this.settings.form_upload_url + "?sessionID=" + this.settings.sessionID + "\"" + + "<form action=\"" + settings.form_upload_url + "?sessionID=" + settings.sessionID + "\"" + " target=\"iframe-" + id + "\"" + " id=\"form-" + id + "\"" + " enctype=\"multipart/form-data\"" + @@ -309,15 +324,15 @@ function Uploader() { $("#fileinput-" + id) .bind("change", function(event) { var files = event.target.files; - _this.uploadFiles(files); - if (!_this.settings.smart_mode) { - _this.generateUploadForm(); + uploadFiles(files); + if (!settings.smart_mode) { + generateUploadForm(); event.target.form.submit(); } event.preventDefault(); return false; }) - $(_this.settings.file_input_button) + $(settings.file_input_button) .unbind("click") .bind("click", function() { $("#fileinput-" + id).trigger("click"); @@ -332,7 +347,7 @@ function Uploader() { } }); } - + this.init = function(opts) { // Checks whether the browser can show SVG, if not PNGs are used var svgSupported = (function() { @@ -364,60 +379,58 @@ function Uploader() { */ // Settings might be overwritten by init() parameters - _this.settings = $.extend({}, _this.settings, opts); - _this.settings.smart_mode = _this.settings.smart_mode && _this.defaults.smart_mode; + settings = $.extend({}, settings, opts); + settings.smart_mode = settings.smart_mode && defaults.smart_mode; // pkupczyk: we do not provide listing of uploaded files yet //$("h2 > a").attr("href", settings.upload_dir); - if (_this.settings.smart_mode) { + if (settings.smart_mode) { $("#filedrop-hint").html("Drag and drop the files to upload here or click 'Select files to upload' button."); - $(_this.settings.file_input) + $(settings.file_input) .bind("change", function(event) { - _this.uploadFiles(event.target.files); + uploadFiles(event.target.files); }); - $(_this.settings.file_input_button) + $(settings.file_input_button) .click(function() { - $(_this.settings.file_input).trigger("click"); + $(settings.file_input).trigger("click"); }); - $(_this.settings.drop_area).bind( + $(settings.drop_area).bind( { dragover: function(event) { var e = event.originalEvent; e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = "copy"; - $(_this.settings.drop_area).addClass("over"); + $(settings.drop_area).addClass("over"); } , dragleave: function(event) { var e = event.originalEvent; e.stopPropagation(); e.preventDefault(); - $(_this.settings.drop_area).removeClass("over"); + $(settings.drop_area).removeClass("over"); } , drop: function(event) { var e = event.originalEvent; e.stopPropagation(); e.preventDefault(); - $(_this.settings.drop_area).removeClass("over"); - _this.uploadFiles(e.dataTransfer.files); + $(settings.drop_area).removeClass("over"); + uploadFiles(e.dataTransfer.files); } } ); } else { // fallback mode $("#filedrop-hint").html("Click 'Select files to upload' button."); - _this.generateUploadForm(); + generateUploadForm(); } //$(settings.file_list_clear_button).click(clearFileList); $("#filedrop-hint").append("<br/>Upload starts immediately after the file selection."); - - //Setting titles - $(_this.settings.main_title_container).append(_this.settings.main_title); - $(_this.settings.uploads_title_container).append(_this.settings.uploads_title); - return _this; + //Setting titles + $(settings.main_title_container).append(settings.main_title); + $(settings.uploads_title_container).append(settings.uploads_title); } -} +} \ No newline at end of file diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/DataSetForm.js b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/DataSetForm.js index 11b165598cc7c9bd93796b7b475f06c07bcd7d3c..443e0faa016063f6f457c804ad455ac3c3a60d37 100644 --- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/DataSetForm.js +++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/UI/DataSetForm.js @@ -113,7 +113,7 @@ function DataSetForm(serverFacade, containerId, profile, sample, mode) { } } - var uploader = this.serverFacade.openbisServer.createSessionWorkspaceUploader($("#APIUploader"), onComplete, { + this.serverFacade.openbisServer.createSessionWorkspaceUploader($("#APIUploader"), onComplete, { main_title : $('<legend>').text('Files Uploader'), uploads_title : $('<legend>').text('File list') }); @@ -335,10 +335,9 @@ function DataSetForm(serverFacade, containerId, profile, sample, mode) { return; } - var uploadingFiles = $("#filelist").children(); - if(uploadingFiles.length > this.files.length) { + if(Uploader.uploadsInProgress()) { Util.blockUI(); - Util.showError("Only " + this.files.length + " from " + uploadingFiles.length + " files have finish. Please wait the upload to finish.", function() { Util.unblockUI(); }); + Util.showError("Please wait the upload to finish.", function() { Util.unblockUI(); }); return; }