From: Benoît Pin Date: Thu, 20 Jun 2013 19:09:48 +0000 (+0200) Subject: Affichage barre de progression et image en local lors de l'upload. X-Git-Url: https://scm.cri.ensmp.fr/git/Portfolio.git/commitdiff_plain/4dee479f3957299afc14e57962d4f4d9aa0633aa?ds=sidebyside;hp=-c Affichage barre de progression et image en local lors de l'upload. --- 4dee479f3957299afc14e57962d4f4d9aa0633aa diff --git a/skins/fileupload.js b/skins/fileupload.js index d1da59e..75c6c6f 100644 --- a/skins/fileupload.js +++ b/skins/fileupload.js @@ -6,6 +6,9 @@ var DDFileUploader; DDFileUploader = function(dropbox, uploadUrl) { this.dropbox = dropbox; this.uploadUrl = uploadUrl; + this.slideSize = 222; + this.progressBarMaxSize = 200; // pixels + this.thumbnailSize = 180; var self = this; addListener(dropbox, 'dragenter', function(evt){self.dragenter(evt);}); addListener(dropbox, 'dragover', function(evt){self.dragover(evt);}); @@ -39,37 +42,98 @@ DDFileUploader.prototype.handleFiles = function(files) { var file, i; for (i = 0; i < files.length; i++) { file = files[i]; - console.log(file.type); + this.createSlide(); + this.previewUploadedImage(file); this.upload(file); } }; +DDFileUploader.prototype.createSlide = function() { + var slide = document.createElement('span'); + + var a = document.createElement('a'); + a.href = '#'; + a.className = 'slide'; + + var img = document.createElement('img'); + this.previewImg = img; + var size = this.thumbnailSize; + var self = this; + img.onload = function(evt) { + if (img.width > img.height) { // landscape + img.height = Math.round(size * img.height / img.width); + img.width = size; + } + else { + img.width = Math.round(size * img.width / img.height); + img.height = size; + } + img.style.marginLeft = Math.round((self.slideSize - img.width) / 2) + 'px'; + img.style.marginTop = Math.round((self.slideSize - img.height) / 2) + 'px'; + img.className = undefined; + }; + a.appendChild(img); + + var progressBar = document.createElement('span'); + progressBar.className = 'upload-progress'; + + slide.appendChild(a); + slide.appendChild(progressBar); + this.progressBar = progressBar; + this.dropbox.appendChild(slide); +}; + +DDFileUploader.prototype.updateProgressBar = function(progress) { + // 0 <= progress <= 1 + var size = this.progressBarMaxSize * progress; + size = Math.round(size); + this.progressBar.style.width = size + 'px'; +} + + DDFileUploader.prototype.upload = function(file) { var reader = new FileReader(); - var xhr = new XMLHttpRequest(); - var percentage; + var req = new XMLHttpRequest(); var self = this; - // this.xhr.upload.addEventListener("progress", function(e) { - // if (e.lengthComputable) { - // var percentage = Math.round((e.loaded * 100) / e.total); - // self.ctrl.update(percentage); - // } - // }, false); - - // xhr.upload.addEventListener("load", function(e){ + + addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);}); + addListener(req.upload, 'load', function(evt){self.uploadCompleteHandler(evt);}); + + // req.upload.addEventListener("load", function(e){ // self.ctrl.update(100); // var canvas = self.ctrl.ctx.canvas; // canvas.parentNode.removeChild(canvas); // }, false); - console.log(file); - xhr.open("PUT", this.uploadUrl + '/' + file.name); - xhr.setRequestHeader("Content-Type", file.type); - // xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); + req.open("PUT", this.uploadUrl + '/' + file.name); + req.setRequestHeader("Content-Type", file.type); + // req.overrideMimeType('text/plain; charset=x-user-defined-binary'); reader.onload = function(evt) { - xhr.sendAsBinary(evt.target.result); + req.sendAsBinary(evt.target.result); }; reader.readAsBinaryString(file); }; +DDFileUploader.prototype.uploadCompleteHandler = function(evt) { + this.progressBar.parentNode.removeChild(this.progressBar); +}; + +DDFileUploader.prototype.progressHandler = function(evt) { + if (evt.lengthComputable) + this.updateProgressBar(evt.loaded / evt.total); +}; + +DDFileUploader.prototype.previewUploadedImage = function(file) { + var reader = new FileReader(); + var img = this.previewImg; + var size = this.thumbnailSize; + + img.className = 'hidden'; + + reader.onload = function(evt) { + img.src = evt.target.result; + }; + reader.readAsDataURL(file); +}; + }()); diff --git a/skins/portfolio_style.css.dtml b/skins/portfolio_style.css.dtml index e4be18a..2325550 100755 --- a/skins/portfolio_style.css.dtml +++ b/skins/portfolio_style.css.dtml @@ -294,6 +294,17 @@ div.lightbox { /*the lightbox itself*/ background: url(&dtml-portal_url;/slide-eye-closed.png); } +.lightbox span.upload-progress { + display: block; + position:relative; + background:#ef8e32; + height:5px; + border-radius:3px; + width:0; + margin-left:11px; + top:208px; +} + .image_toolbar { background: url(&dtml-portal_url;/image_toolbar_bg.gif) repeat-x; position:relative;