skins/fileupload.js

   1 // © 2013 Benoît Pin MINES ParisTech
   2 var DDFileUploaderBase;
   3
   4 (function(){
   5
   6 DDFileUploaderBase = function(dropbox, uploadUrl) {
   7         this.dropbox = dropbox;
   8         this.uploadUrl = uploadUrl;
   9         this.uploadQueue = [];
  10         this._uploadQueueRunning = false;
  11         var self = this;
  12         addListener(dropbox, 'dragenter', function(evt){self.dragenter(evt);});
  13         addListener(dropbox, 'dragover', function(evt){self.dragover(evt);});
  14         addListener(dropbox, 'drop', function(evt){self.drop(evt);});
  15 };
  16
  17 // Drag and drop
  18 DDFileUploaderBase.prototype.dragenter = function(evt) {
  19         disableDefault(evt);
  20         disablePropagation(evt);
  21 };
  22
  23 DDFileUploaderBase.prototype.dragover = function(evt) {
  24         disableDefault(evt);
  25         disablePropagation(evt);
  26         evt = getEventObject(evt);
  27         var dt = evt.dataTransfer;
  28         dt.dropEffect = 'copy';
  29 };
  30
  31 DDFileUploaderBase.prototype.drop = function(evt) {
  32         disableDefault(evt);
  33         disablePropagation(evt);
  34         getEventObject(evt);
  35         var dt = evt.dataTransfer;
  36         dt.dropEffect = 'copy';
  37         this.handleFiles(dt.files);
  38 };
  39
  40 // Methods about upload
  41 DDFileUploaderBase.prototype.handleFiles = function(files) {
  42         // To be implemented by descendant.
  43 };
  44
  45 DDFileUploaderBase.prototype.upload = function(slide) {
  46         var reader = new FileReader();
  47         var req = new XMLHttpRequest();
  48         var file = slide.file;
  49         this.uploadedSlide = slide;
  50         this.previewImg = slide.img;
  51         this.progressBar = slide.progressBar;
  52         var self = this;
  53
  54         addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
  55         addListener(req, 'readystatechange',
  56                 function(evt) {
  57                         if (req.readyState === 4) {
  58                                 self.uploadCompleteHandler(req);
  59                         }
  60                 });
  61
  62         req.open("PUT", this.uploadUrl);
  63         req.setRequestHeader("Content-Type", file.type);
  64         req.setRequestHeader("X-File-Name", file.name);
  65         addListener(reader, 'load',
  66                 function(evt){
  67                         try {
  68                                 req.sendAsBinary(evt.target.result);
  69                         }
  70                         catch(e){}
  71                 });
  72         reader.readAsBinaryString(file);
  73 };
  74
  75 DDFileUploaderBase.prototype.uploadCompleteHandler = function(req) {
  76         var slide = this.uploadedSlide;
  77         this.uploadedSlide.removeChild(slide.label);
  78     this.uploadedSlide.removeChild(slide.progressBar);
  79         var fragment = getCopyOfNode(req.responseXML.documentElement.firstChild);
  80         var img = fragment.getElementsByTagName('img')[0];
  81         if (req.status === 200) {
  82                 // update
  83                 var existing = this.existingSlides[img.src];
  84                 if (existing) {
  85                         existing.src = existing.src + '?' + Math.random().toString();
  86                 }
  87                 slide.img.src = '';
  88                 slide.img.parentNode.removeChild(slide.img);
  89                 slide.img = undefined;
  90                 slide.parentNode.removeChild(slide);
  91         }
  92         else if(req.status === 201) {
  93                 // creation
  94                 img.onload = function(evt) {
  95                         // accelerate GC before replacing
  96                         slide.img.src = '';
  97                         slide.img.parentNode.removeChild(slide.img);
  98                         slide.img = undefined;
  99                         slide.parentNode.replaceChild(fragment, slide);
 100                 };
 101         }
 102         this.previewsLoaded--;
 103         this.previewQueueLoadNext();
 104         this.uploadQueueLoadNext();
 105 };
 106
 107 DDFileUploaderBase.prototype.progressHandler = function(evt) {
 108         if (evt.lengthComputable) {
 109                 var progress = evt.loaded / evt.total;
 110                 this.updateProgressBar(progress);
 111                 var currentOpacity = this.previewImg.style.opacity;
 112                 this.previewImg.style.opacity = Math.max(currentOpacity, progress);
 113         }
 114 };
 115
 116 // Methods about queue
 117 DDFileUploaderBase.prototype.uploadQueuePush = function(item) {
 118         this.uploadQueue.push(item);
 119         if (!this._uploadQueueRunning) {
 120                 this.startUploadQueue();
 121         }
 122 };
 123
 124 DDFileUploaderBase.prototype.startUploadQueue = function() {
 125         this._uploadQueueRunning = true;
 126         this.uploadQueueLoadNext();
 127 };
 128
 129 DDFileUploaderBase.prototype.uploadQueueLoadNext = function() {
 130         var item = this.uploadQueue.shift();
 131         if (item) {
 132                 this.upload(item);
 133         }
 134         else {
 135                 this._uploadQueueRunning = false;
 136         }
 137 };
 138
 139 }());