Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 2 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Commits on Apr 30, 2012
@dayvson Revert "Improve documentation about tests"
This reverts commit b62cc07.
c52e808
@dayvson - f184aa9
Showing with 141 additions and 216 deletions.
  1. +1 −4 README.textile
  2. +140 −212 app/static/js/uploader.js
View
5 README.textile
@@ -59,10 +59,7 @@ cd splinter
sudo make install
</pre>
-To run the tests open two shell screens:
-In the first one run the application
-<pre>make</pre>
-In the second one run the tests
+I did some unit tests for this prototype for run these
<pre> make test </pre>
View
352 app/static/js/uploader.js
@@ -1,240 +1,168 @@
(function(doc, win){
- /* Only a simple function with callbacks for complete/error/start/progress */
- var BaseUploader = function(){};
- BaseUploader.prototype = {
- onProgress:function(){},
- onComplete:function(){},
- onCancel:function(){},
- onError:function(){},
- onStart:function(){}
- }
- /* This class will make a uploader XHR Level 2 */
- var XHRUploader = function(input, form, urlPost, urlProgress){
- this.inputFile = input;
- this.urlpost = urlPost;
- this.urlprogress = urlProgress;
- this.isUploadComplete = false;
- this.progress = null;
- this.form = form;
- }
- XHRUploader.prototype = new BaseUploader();
- XHRUploader.prototype.start = function(){
- var fd = new FormData();
- var file = this.inputFile.files[0];
- fd.append(this.inputFile.name, file);
- var xhr = this.xhr = new XMLHttpRequest();
- if(xhr.upload)Util.addEvent(xhr.upload, "progress", this._uploadProgress, this);
- Util.addEvent(xhr, "load", this._uploadComplete, this);
- Util.addEvent(xhr, "error", this._uploadFailed, this);
- Util.addEvent(xhr, "abort", this._uploadCanceled, this);
- xhr.open("POST", this.urlPost);
- xhr.send(fd);
- this.isUploadComplete = false;
- this._startVerifyProgress( null );
- this.onStart();
- }
- XHRUploader.prototype.setProgress = function(loaded, total){
- var progressTemp = {lengthComputable:true, loaded:loaded, total:total};
- this._uploadProgress(progressTemp);
- }
- XHRUploader.prototype._uploadComplete = function(evt){
- this.isUploadComplete = true;
- this.onComplete(this.xhr.responseText);
- clearTimeout(this.checkProgresstimeInterval);
- }
- XHRUploader.prototype._uploadFailed = function(evt){
- this.isUploadComplete = false;
- this.onError();
- clearTimeout(this.checkProgresstimeInterval);
- }
- XHRUploader.prototype._uploadCanceled = function(evt){
- this.isUploadComplete = false;
- this.onCancel();
- clearTimeout(this.checkProgresstimeInterval);
- }
- XHRUploader.prototype._uploadProgress = function(evt){
- if (evt.lengthComputable) {
- var percent = Math.round(evt.loaded / evt.total * 100);
- this.onProgress(evt.loaded, evt.total, percent);
- this._startVerifyProgress( evt.loaded );
- }
- }
- XHRUploader.prototype._startVerifyProgress = function( progress ){
- clearTimeout(this.checkProgresstimeInterval);
- var self = this;
- this.checkProgresstimeInterval = setTimeout(function( scope ){
- self._verifyProgress( progress );
- }, 10000, this);
- }
- XHRUploader.prototype._verifyProgress = function( progress ){
- if(this.isUploadComplete) return;
- if(progress == null || this.progress == progress){
- this.xhr.abort();
- this.onError();
- }else{
- this.progress = progress;
- this._startVerifyProgress( null );
- }
- }
-
- /* This class will make a uploader using form and a hidden iframe */
- var IframeUploader = function(input, form, urlPost, urlProgress){
- this.inputFile = input;
- this.form = form;
- this.urlpost = urlPost;
- this.urlprogress = urlProgress;
- }
- IframeUploader.prototype = new BaseUploader();
- IframeUploader.prototype.start = function(){
- this.key = Util.getKey();
- var iframeId = "__upload_iframe__";
- var iframe = Util.create("iframe", {
- "id": iframeId,
- "name": iframeId,
- "width":"0", "height":"0", "border":"0",
- "style":"width: 0; height: 0; border: none;"
- });
-
- Util.addEvent(iframe, "load", this._uploadComplete, this);
- this.iframe = iframe;
- this.form.parentNode.appendChild(iframe);
- win.frames[iframeId].name = iframeId;
- this.form.setAttribute("target", iframeId);
- this.form.setAttribute("action", this.urlPost);
- this.form.submit();
- this.isUploadComplete = false;
- this.onStart();
- this.onProgress(0, -1, 0);
- var self = this;
- this.timeInterval = setTimeout(function(){
- self._uploadProgress();
- }, 800);
- }
- IframeUploader.prototype.setProgress = function(loaded, total){
- var progressTemp = {lengthComputable:true, loaded:loaded, total:total};
- this._uploadProgress(progressTemp);
- }
- IframeUploader.prototype._getContentIFrame = function(iframe){
- var content = "";
- try{
- if (iframe.contentDocument) {
- content = iframe.contentDocument.body.innerHTML;
- } else if (iframe.contentWindow) {
- content = iframe.contentWindow.document.body.innerHTML;
- } else if (iframe.document) {
- content = iframe.document.body.innerHTML;
- }
- }catch(e){}
- return content;
- }
- IframeUploader.prototype._uploadComplete = function(){
- var iframe = Util.$("__upload_iframe__");
- var content = this._getContentIFrame(iframe);
- this.isUploadComplete = true;
- this.onComplete(content);
- clearTimeout(this.timeInterval);
- setTimeout(function(){
- try{
- Util.remove(iframe);
- }catch(e){}
- }, 250);
- }
- IframeUploader.prototype._uploadProgress = function(){
- var urlProgress = this.progressUrl + "&rand="+new Date().getTime();
- Util.XHR(urlProgress, "GET", Util.delegate(this,this._onCompleteXHRPoolingProgress));
- }
- IframeUploader.prototype._onCompleteXHRPoolingProgress = function(data){
- if(!this.isUploadComplete){
- var self = this;
- this.timeInterval = setTimeout(function(){
- self._uploadProgressByIframe();
- }, 800);
- }
- if(data === "{}") return;
- var json = eval('(' + data + ')');
- if(json.bytes_loaded){
- var percent = Math.round(json.bytes_loaded / json.bytes_total * 100);
- this.onProgress(json.bytes_loaded, json.bytes_total, percent);
- }
- }
-
- IframeUploader.prototype._onErrorXHR = function(data){
- //Retry
- }
-
- IframeUploader.prototype._startVerifyProgress = function( progress ){
- clearTimeout(this.checkProgresstimeInterval);
- var self = this;
- this.checkProgresstimeInterval = setTimeout(function(){
- self._verifyProgress( progress );
- }, 10000);
- }
- IframeUploader.prototype._verifyProgress = function( progress ){
- if(this.isUploadComplete) return;
- if(progress == null || this.progress == progress){
- Util.remove(Util.$("__upload_iframe__"));
- this.onError();
- }else{
- this.progress = progress;
- this._startVerifyProgress( null );
- }
- }
-
- var Uploader = function(form, inputFile, progressUrl, uploadUrl){
+ var _uploader = function(form, inputFile, progressUrl, uploadUrl, timeForUpdate){ //change to use options args
this.form = typeof(form) === "string" ? Util.$(form) : form;
this.input = typeof(inputFile) === "string" ? Util.$(inputFile) : inputFile;
this.progressUrl = progressUrl;
this.uploadUrl = uploadUrl;
+ this.timeForUpdate = timeForUpdate;
this.xhrSupport = Util.hasXHRUpload();
+ this.xhr;
+ this.timeInterval;
+ this.checkProgresstimeInterval;
+ this.progress = null;
+ this.isUploadComplete = false;
this.init();
}
- Uploader.prototype = {
- /* These functions show be replace by callbacks for each action */
+ _uploader.prototype = {
onProgress:function(){},
onComplete:function(){},
onCancel:function(){},
onError:function(){},
onStart:function(){},
- /* These functions show be replace by callbacks for each actions */
init:function(){
this.form.setAttribute("enctype","multipart/form-data");
this.form.setAttribute("encoding", "multipart/form-data");
this.form.setAttribute("method" , "post");
- this.upload = this._getUploaderInstance();
Util.addEvent(this.input, "change", this._onChangeInput, this);
},
- start:function(){
+ _onChangeInput:function(){
+ if(this.xhrSupport){
+ this.startUploadByXHR();
+ }else{
+ this.startUploadByIframe();
+ }
+ },
+ startUploadByXHR:function(){
+ this.isUploadComplete = false;
this.key = Util.getKey();
- this._registerEvents();
- this.upload.progressUrl = this.progressUrl + "?uploadKey=" + this.key;
- this.upload.urlPost = this.uploadUrl + "?uploadKey=" + this.key;
- this.upload.start();
+ var fd = new FormData();
+ var file = this.input.files[0];
+ fd.append(this.input.name, file);
+ var xhr = this.xhr = new XMLHttpRequest();
+ if(xhr.upload)Util.addEvent(xhr.upload, "progress", this._uploadProgress, this);
+ Util.addEvent(xhr, "load", this._uploadComplete, this);
+ Util.addEvent(xhr, "error", this._uploadFailed, this);
+ Util.addEvent(xhr, "abort", this._uploadCanceled, this);
+ xhr.open("POST", this.uploadUrl + "?uploadKey=" + this.key);
+ xhr.send(fd);
+ this._startVerifyProgress( null );
+ this.onStart();
},
- isUploadComplete:function(){
- return this.upload.isUploadComplete||false;
+ _uploadComplete:function(evt){
+ this.isUploadComplete = true;
+ this.onComplete(this.xhr.responseText);
},
- setProgress:function(loaded, total){
- this.upload.setProgress(loaded, total);
+ _uploadFailed:function(evt){
+ this.isUploadComplete = false;
+ this.onError();
},
- _getUploaderInstance:function(){
- var uploaderMethod = {
- true:XHRUploader,
- false:IframeUploader
- };
- var instance = new uploaderMethod[this.xhrSupport](this.input, this.form, this.urlPost, this.progressUrl);
- return instance;
+ _uploadCanceled:function(evt){
+ this.isUploadComplete = false;
+ this.onCancel();
},
- _registerEvents:function(){
- var self = this;
- this.upload.onProgress = function(bytes_loaded, bytes_total, perc){
- self.onProgress(bytes_loaded, bytes_total, perc);
+ _uploadProgress:function(evt){
+ if (evt.lengthComputable) {
+ var percent = Math.round(evt.loaded / evt.total * 100);
+ this.onProgress(evt.loaded, evt.total, percent);
+ this._startVerifyProgress( evt.total );
}
- this.upload.onComplete = function(arg){ self.onComplete(arg); }
- this.upload.onError = function(){ self.onError(); }
- this.upload.onStart = function(){ self.onStart(); }
},
- _onChangeInput:function(){
- this.start();
+ _onCompleteXHRPooling:function(data){
+ if(!this.isUploadComplete){
+ var self = this;
+ this.timeInterval = setTimeout(function(){
+ self._uploadProgressByIframe();
+ }, this.timeForUpdate);
+ }
+ if(data === "{}") return;
+ var json = eval('('+data+')');
+ if(json.bytes_loaded){
+ var percent = Math.round(json.bytes_loaded / json.bytes_total * 100);
+ this.onProgress(json.bytes_loaded, json.bytes_total, percent);
+ }
+ },
+ _onErrorXHR:function(data){
+ //Retry
+ },
+ _uploadProgressByIframe:function(){
+ var params = "?uploadKey=" + this.key + "&rand="+new Date().getTime();
+ Util.XHR(this.progressUrl, "GET", Util.delegate(this,this._onCompleteXHRPooling), params);
+ },
+ _startVerifyProgress:function( progress ){
+ clearTimeout(this.checkProgresstimeInterval);
+ var self = this;
+ this.checkProgresstimeInterval = setTimeout(function( scope ){
+ self._verifyProgress( progress );
+ }, 10000, this);
+ },
+ _verifyProgress:function( progress ){
+ if(progress == null || this.progress == progress){
+ if(this.xhrSupport){
+ this.xhr.abort();
+ this.onError();
+ }else{
+ Util.remove(Util.$(this.key + "__upload_iframe__"));
+ this.onError();
+ }
+ }else{
+ var self = this;
+ this.progress = progress;
+ this._startVerifyProgress( null );
+ }
+ },
+ setProgress:function(progress){
+ var event = progress;
+ event['lengthComputable'] = true;
+ if(event){
+ this._uploadProgress(event);
+ }
+ },
+ startUploadByIframe:function(){
+ this.key = Util.getKey();
+ var iframeId = this.key + "__upload_iframe__";
+ var iframe = Util.create("iframe", {
+ "id": iframeId,
+ "name": iframeId,
+ "width":"0", "height":"0", "border":"0",
+ "style":"width: 0; height: 0; border: none;"
+ });
+
+ Util.addEvent(iframe, "load", this.onLoadIframe, this);
+ this.iframe = iframe;
+ this.form.parentNode.appendChild(iframe);
+ win.frames[iframeId].name = iframeId;
+ this.form.setAttribute("target", iframeId);
+ this.form.setAttribute("action", this.uploadUrl + "?uploadKey=" + this.key);
+ this.form.submit();
+ this.onStart();
+ this.onProgress(0, -1, 0);
+ var self = this;
+ this.timeInterval = setTimeout(function(){
+ self._uploadProgressByIframe();
+ }, this.timeForUpdate);
+ },
+ onLoadIframe:function(){
+ var iframeId = this.key + "__upload_iframe__";
+ var iframe = Util.$(iframeId);
+ this.isUploadComplete = true;
+ clearTimeout(this.timeInterval);
+ var content = "";
+ try{
+ if (iframe.contentDocument) {
+ content = iframe.contentDocument.body.innerHTML;
+ } else if (iframe.contentWindow) {
+ content = iframe.contentWindow.document.body.innerHTML;
+ } else if (iframe.document) {
+ content = iframe.document.body.innerHTML;
+ }
+ }catch(e){}
+ this.onComplete(content);
+ setTimeout(function(){
+ try{
+ Util.remove(Util.$(iframeId));
+ }catch(e){}
+ }, 250);
+
}
}
var _superUpload = function(form, inputFile, description, saveButton,
@@ -262,6 +190,6 @@
win.location.href = this.saveUrl+"?uploadKey=" + this.file.key;
}
}
- win.Uploader = Uploader;
+ win.Uploader = _uploader;
win.SuperUpload = _superUpload;
}(document,window));

No commit comments for this range

Something went wrong with that request. Please try again.