skins/fileupload.js

   1 // © 2013 Benoît Pin MINES ParisTech
   2 var DDFileUploader;
   3
   4 (function(){
   5 // nombre maximun d'image chargées en local
   6 var MAX_PREVIEW = 2;
   7 var isThumbnail = /.*\/getThumbnail$/;
   8
   9 DDFileUploader = function(dropbox, uploadUrl) {
  10         this.dropbox = dropbox;
  11         this.existingSlides = this.indexExistingSlides();
  12         this.uploadUrl = uploadUrl;
  13         this.slideSize = 222;
  14         this.progressBarMaxSize = 200; // pixels
  15         this.thumbnailSize = 180;
  16         this.previewQueue = [];
  17         this._previewQueueRunning = false;
  18         this.previewsLoaded = 0;
  19         this.uploadQueue = [];
  20         this._uploadQueueRunning = false;
  21         var self = this;
  22         addListener(dropbox, 'dragenter', function(evt){self.dragenter(evt);});
  23         addListener(dropbox, 'dragover', function(evt){self.dragover(evt);});
  24         addListener(dropbox, 'drop', function(evt){self.drop(evt);});
  25 };
  26
  27 DDFileUploader.prototype.indexExistingSlides = function() {
  28         var images = this.dropbox.getElementsByTagName('img');
  29         var i;
  30         var index = [];
  31         for (i=0 ; i < images.length ; i++) {
  32                 if (isThumbnail.test(images[i].src)) {
  33                         index[images[i].src] = images[i];
  34                 }
  35         }
  36         return index;
  37 };
  38
  39 // Drag and drop
  40 DDFileUploader.prototype.dragenter = function(evt) {
  41         disableDefault(evt);
  42         disablePropagation(evt);
  43 };
  44
  45 DDFileUploader.prototype.dragover = function(evt) {
  46         disableDefault(evt);
  47         disablePropagation(evt);
  48         evt = getEventObject(evt);
  49         var dt = evt.dataTransfer;
  50         dt.dropEffect = 'copy';
  51 };
  52
  53 DDFileUploader.prototype.drop = function(evt) {
  54         disableDefault(evt);
  55         disablePropagation(evt);
  56         getEventObject(evt);
  57         var dt = evt.dataTransfer;
  58         dt.dropEffect = 'copy';
  59         this.handleFiles(dt.files);
  60 };
  61
  62 // Methods about upload
  63 DDFileUploader.prototype.handleFiles = function(files) {
  64         var file, i, slide;
  65         for (i = 0; i < files.length; i++) {
  66                 file = files[i];
  67                 slide = this.createSlide(file);
  68         this.previewQueuePush(slide);
  69         this.uploadQueuePush(slide);
  70         }
  71 };
  72
  73 DDFileUploader.prototype.upload = function(slide) {
  74         var reader = new FileReader();
  75         var req = new XMLHttpRequest();
  76         var file = slide.file;
  77         this.uploadedSlide = slide;
  78         this.previewImg = slide.img;
  79         this.progressBar = slide.progressBar;
  80         var self = this;
  81
  82         addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
  83         addListener(req, 'readystatechange',
  84                 function(evt) {
  85                         if (req.readyState === 4) {
  86                                 self.uploadCompleteHandler(req);
  87                         }
  88                 });
  89
  90         req.open("PUT", this.uploadUrl);
  91         req.setRequestHeader("Content-Type", file.type);
  92         req.setRequestHeader("X-File-Name", file.name);
  93         addListener(reader, 'load',
  94                 function(evt){
  95                         try {
  96                                 req.sendAsBinary(evt.target.result);
  97                         }
  98                         catch(e){}
  99                 });
 100         reader.readAsBinaryString(file);
 101 };
 102
 103 DDFileUploader.prototype.uploadCompleteHandler = function(req) {
 104         var slide = this.uploadedSlide;
 105         this.uploadedSlide.removeChild(slide.label);
 106     this.uploadedSlide.removeChild(slide.progressBar);
 107         var fragment = getCopyOfNode(req.responseXML.documentElement.firstChild);
 108         var img = fragment.getElementsByTagName('img')[0];
 109         if (req.status === 200) {
 110                 // update
 111                 var existing = this.existingSlides[img.src];
 112                 if (existing) {
 113                         existing.src = existing.src + '?' + Math.random().toString();
 114                 }
 115                 slide.img.src = '';
 116                 slide.img.parentNode.removeChild(slide.img);
 117                 slide.img = undefined;
 118                 slide.parentNode.removeChild(slide);
 119         }
 120         else if(req.status === 201) {
 121                 // creation
 122                 img.onload = function(evt) {
 123                         // accelerate GC before replacing
 124                         slide.img.src = '';
 125                         slide.img.parentNode.removeChild(slide.img);
 126                         slide.img = undefined;
 127                         slide.parentNode.replaceChild(fragment, slide);
 128                 };
 129         }
 130         this.previewsLoaded--;
 131         this.previewQueueLoadNext();
 132         this.uploadQueueLoadNext();
 133 };
 134
 135 DDFileUploader.prototype.progressHandler = function(evt) {
 136         if (evt.lengthComputable) {
 137                 var progress = evt.loaded / evt.total;
 138                 this.updateProgressBar(progress);
 139                 var currentOpacity = this.previewImg.style.opacity;
 140                 this.previewImg.style.opacity = Math.max(currentOpacity, progress);
 141         }
 142 };
 143
 144 // Method about queues
 145
 146 DDFileUploader.prototype.previewQueuePush = function(slide) {
 147         this.previewQueue.push(slide);
 148         if (!this._previewQueueRunning) {
 149                 this.startPreviewQueue();
 150         }
 151 };
 152
 153 DDFileUploader.prototype.startPreviewQueue = function() {
 154         this._previewQueueRunning = true;
 155         this.previewQueueLoadNext();
 156 };
 157
 158 DDFileUploader.prototype.previewQueueLoadNext = function() {
 159         if (this.previewQueue.length && this.previewsLoaded < MAX_PREVIEW) {
 160                 var slide = this.previewQueue.shift();
 161                 this.previewUploadedImage(slide);
 162                 this.previewsLoaded++;
 163         }
 164         else {
 165                 this._previewQueueRunning = false;
 166         }
 167 };
 168
 169 DDFileUploader.prototype.uploadQueuePush = function(slide) {
 170         this.uploadQueue.push(slide);
 171         if (!this._uploadQueueRunning) {
 172                 this.startUploadQueue();
 173         }
 174 };
 175
 176 DDFileUploader.prototype.startUploadQueue = function() {
 177         this._uploadQueueRunning = true;
 178         this.uploadQueueLoadNext();
 179 };
 180
 181
 182 DDFileUploader.prototype.uploadQueueLoadNext = function() {
 183         var slide = this.uploadQueue.shift();
 184         if (slide) {
 185                 this.upload(slide);
 186         }
 187         else {
 188                 this._uploadQueueRunning = false;
 189         }
 190 };
 191
 192
 193 // User interface
 194 DDFileUploader.prototype.createSlide = function(file) {
 195         var slide = document.createElement('span');
 196         slide.file = file;
 197
 198         var a = document.createElement('a');
 199         a.href = '#';
 200         a.className = 'slide';
 201
 202         var img = document.createElement('img');
 203         img.className = 'hidden';
 204         var size = this.thumbnailSize;
 205         var self = this;
 206         img.onload = function(evt) {
 207                 if (img.width > img.height) { // landscape
 208                         img.height = Math.round(size * img.height / img.width);
 209                         img.width = size;
 210                 }
 211                 else {
 212                         img.width = Math.round(size * img.width / img.height);
 213                         img.height = size;
 214                 }
 215                 img.style.marginLeft = Math.floor((self.slideSize - img.width) / 2) + 'px';
 216                 img.style.marginTop = Math.floor((self.slideSize - img.height) / 2) + 'px';
 217                 img.style.opacity = 0.2;
 218                 img.className = undefined;
 219         };
 220         a.appendChild(img);
 221         slide.img = img;
 222
 223         var label = document.createElement('span');
 224         slide.label = label;
 225         label.className = 'label';
 226         label.innerHTML = file.name;
 227
 228         var progressBar = document.createElement('span');
 229         progressBar.className = 'upload-progress';
 230         slide.progressBar = progressBar;
 231
 232         slide.appendChild(a);
 233         slide.appendChild(progressBar);
 234         slide.appendChild(label);
 235         this.dropbox.appendChild(slide);
 236
 237         return slide;
 238 };
 239
 240 DDFileUploader.prototype.updateProgressBar = function(progress) {
 241         // 0 <= progress <= 1
 242         var size = this.progressBarMaxSize * progress;
 243         size = Math.round(size);
 244         this.progressBar.style.width = size + 'px';
 245 };
 246
 247 DDFileUploader.prototype.previewUploadedImage = function(slide) {
 248         var reader = new FileReader();
 249         var size = this.thumbnailSize;
 250         var self = this;
 251
 252         reader.onload = function(evt) {
 253                 slide.img.src = evt.target.result;
 254                 setTimeout(function(){self.previewQueueLoadNext();}, 500);
 255         };
 256         reader.readAsDataURL(slide.file);
 257 };
 258
 259 }());