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
  46
  47 DDFileUploaderBase.prototype.beforeUpload = function(item) {
  48         // To be implemented by decendant.
  49 };
  50
  51
  52 DDFileUploaderBase.prototype.upload = function(item) {
  53         // item.file must be the file to be uploaded
  54         this.beforeUpload(item);
  55         var reader = new FileReader();
  56         var req = new XMLHttpRequest();
  57         var file = item.file;
  58
  59         var self = this;
  60
  61         addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
  62         addListener(req, 'readystatechange',
  63                 function(evt) {
  64                         if (req.readyState === 4) {
  65                                 self.uploadCompleteHandler(req);
  66                         }
  67                 });
  68
  69         req.open("PUT", this.uploadUrl);
  70         req.setRequestHeader("Content-Type", file.type);
  71         req.setRequestHeader("X-File-Name", file.name);
  72         addListener(reader, 'load',
  73                 function(evt){
  74                         try {
  75                                 req.sendAsBinary(evt.target.result);
  76                         }
  77                         catch(e){}
  78                 });
  79         reader.readAsBinaryString(file);
  80 };
  81
  82 DDFileUploaderBase.prototype.uploadCompleteHandler = function(req) {
  83         var slide = this.uploadedSlide;
  84         this.uploadedSlide.removeChild(slide.label);
  85     this.uploadedSlide.removeChild(slide.progressBar);
  86         var fragment = getCopyOfNode(req.responseXML.documentElement.firstChild);
  87         var img = fragment.getElementsByTagName('img')[0];
  88         if (req.status === 200) {
  89                 // update
  90                 var existing = this.existingSlides[img.src];
  91                 if (existing) {
  92                         existing.src = existing.src + '?' + Math.random().toString();
  93                 }
  94                 slide.img.src = '';
  95                 slide.img.parentNode.removeChild(slide.img);
  96                 slide.img = undefined;
  97                 slide.parentNode.removeChild(slide);
  98         }
  99         else if(req.status === 201) {
 100                 // creation
 101                 img.onload = function(evt) {
 102                         // accelerate GC before replacing
 103                         slide.img.src = '';
 104                         slide.img.parentNode.removeChild(slide.img);
 105                         slide.img = undefined;
 106                         slide.parentNode.replaceChild(fragment, slide);
 107                 };
 108         }
 109         this.previewsLoaded--;
 110         this.previewQueueLoadNext();
 111         this.uploadQueueLoadNext();
 112 };
 113
 114 DDFileUploaderBase.prototype.progressHandler = function(evt) {
 115         if (evt.lengthComputable) {
 116                 var progress = evt.loaded / evt.total;
 117                 this.updateProgressBar(progress);
 118                 var currentOpacity = this.previewImg.style.opacity;
 119                 this.previewImg.style.opacity = Math.max(currentOpacity, progress);
 120         }
 121 };
 122
 123 // Methods about queue
 124 DDFileUploaderBase.prototype.uploadQueuePush = function(item) {
 125         this.uploadQueue.push(item);
 126         if (!this._uploadQueueRunning) {
 127                 this.startUploadQueue();
 128         }
 129 };
 130
 131 DDFileUploaderBase.prototype.startUploadQueue = function() {
 132         this._uploadQueueRunning = true;
 133         this.uploadQueueLoadNext();
 134 };
 135
 136 DDFileUploaderBase.prototype.uploadQueueLoadNext = function() {
 137         var item = this.uploadQueue.shift();
 138         if (item) {
 139                 this.upload(item);
 140         }
 141         else {
 142                 this._uploadQueueRunning = false;
 143         }
 144 };
 145
 146 }());