X-Git-Url: https://scm.cri.mines-paristech.fr/git/Plinn.git/blobdiff_plain/36f853f6b380099a378c032baf46f35d914026f9..1a7f45c97463edef7308087838235008b8ecfdbf:/skins/fileupload.js diff --git a/skins/fileupload.js b/skins/fileupload.js index d862ad6..bf36628 100644 --- a/skins/fileupload.js +++ b/skins/fileupload.js @@ -1,54 +1,127 @@ -function dragenter(evt) { +// © 2013 Benoît Pin MINES ParisTech +var DDFileUploaderBase; + +(function(){ + +DDFileUploaderBase = function(dropbox, uploadUrl) { + this.dropbox = dropbox; + this.uploadUrl = uploadUrl; + this.uploadQueue = []; + this._uploadQueueRunning = false; + var self = this; + addListener(dropbox, 'dragenter', function(evt){self.dragenter(evt);}); + addListener(dropbox, 'dragover', function(evt){self.dragover(evt);}); + addListener(dropbox, 'drop', function(evt){self.drop(evt);}); +}; + +// Drag and drop +DDFileUploaderBase.prototype.dragenter = function(evt) { disableDefault(evt); disablePropagation(evt); -} +}; -function dragover(evt) { +DDFileUploaderBase.prototype.dragover = function(evt) { disableDefault(evt); disablePropagation(evt); evt = getEventObject(evt); var dt = evt.dataTransfer; dt.dropEffect = 'copy'; -} +}; - -function drop(evt) { +DDFileUploaderBase.prototype.drop = function(evt) { disableDefault(evt); disablePropagation(evt); getEventObject(evt); var dt = evt.dataTransfer; dt.dropEffect = 'copy'; - handleFiles(dt.files); -} - -function handleFiles(files) { - for (var i = 0; i < files.length; i++) { - var file = files[i]; - console.log(file.type); - // console.log(file); - // var imageType = /image.*/; - // - // if (!file.type.match(imageType)) { - // continue; - // } - // - // var img = document.createElement("img"); - // img.classList.add("obj"); - // img.file = file; - // preview.appendChild(img); - // - // var reader = new FileReader(); - // reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); - // reader.readAsDataURL(file); + this.handleFiles(dt.files); +}; + +// Methods about upload +DDFileUploaderBase.prototype.handleFiles = function(files) { + // To be implemented by descendant. +}; + + + +DDFileUploaderBase.prototype.beforeUpload = function(item) { + // To be implemented by decendant. +}; + + +DDFileUploaderBase.prototype.upload = function(item) { + // item.file must be the file to be uploaded + this.beforeUpload(item); + var reader = new FileReader(); + var req = new XMLHttpRequest(); + var file = item.file; + + var self = this; + + addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);}); + addListener(req, 'readystatechange', + function(evt) { + if (req.readyState === 4) { + self.uploadCompleteHandler(req); + } + }); + + req.open("PUT", this.uploadUrl); + req.setRequestHeader("Content-Type", file.type); + req.setRequestHeader("X-File-Name", file.name); + addListener(reader, 'load', + function(evt){ + try { + req.sendAsBinary(evt.target.result); + } + catch(e){} + }); + reader.readAsBinaryString(file); +}; + + +DDFileUploaderBase.prototype.uploadCompleteHandlerCB = function(req) { + // To be implemented by descendant. +}; + +DDFileUploaderBase.prototype.uploadCompleteHandler = function(req) { + this.uploadCompleteHandlerCB(req); + this.uploadQueueLoadNext(); +}; + +DDFileUploaderBase.prototype.progressHandlerCB = function(progress) { + // To be implemented by descendant. + // 0 <= progress <= 1 +}; + +DDFileUploaderBase.prototype.progressHandler = function(evt) { + if (evt.lengthComputable) { + var progress = evt.loaded / evt.total; + this.progressHandlerCB(progress); + } +}; + +// Methods about queue +DDFileUploaderBase.prototype.uploadQueuePush = function(item) { + this.uploadQueue.push(item); + if (!this._uploadQueueRunning) { + this.startUploadQueue(); } -} +}; -function init() { - var dropbox = document.getElementById('dropbox'); - addListener(dropbox, 'dragenter', dragenter); - addListener(dropbox, 'dragover', dragover); - addListener(dropbox, 'drop', drop); -} +DDFileUploaderBase.prototype.startUploadQueue = function() { + this._uploadQueueRunning = true; + this.uploadQueueLoadNext(); +}; +DDFileUploaderBase.prototype.uploadQueueLoadNext = function() { + var item = this.uploadQueue.shift(); + if (item) { + this.upload(item); + } + else { + this._uploadQueueRunning = false; + } +}; -addListener(window, 'load', init); \ No newline at end of file +}());