skins/fileupload.js

   1 // © 2013 Benoît Pin MINES ParisTech
   2 var DDFileUploader;
   3
   4 (function(){
   5
   6 DDFileUploader = function(dropbox, uploadUrl) {
   7         this.dropbox = dropbox;
   8         this.uploadUrl = uploadUrl;
   9         this.slideSize = 222;
  10         this.progressBarMaxSize = 200; // pixels
  11         this.thumbnailSize = 180;
  12         var self = this;
  13         addListener(dropbox, 'dragenter', function(evt){self.dragenter(evt);});
  14         addListener(dropbox, 'dragover', function(evt){self.dragover(evt);});
  15         addListener(dropbox, 'drop', function(evt){self.drop(evt);});
  16 };
  17
  18 DDFileUploader.prototype.dragenter = function(evt) {
  19         disableDefault(evt);
  20         disablePropagation(evt);
  21 };
  22
  23 DDFileUploader.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
  32 DDFileUploader.prototype.drop = function(evt) {
  33         disableDefault(evt);
  34         disablePropagation(evt);
  35         getEventObject(evt);
  36         var dt = evt.dataTransfer;
  37         dt.dropEffect = 'copy';
  38         this.handleFiles(dt.files);
  39 };
  40
  41 DDFileUploader.prototype.handleFiles = function(files) {
  42         var file, i;
  43         for (i = 0; i < files.length; i++) {
  44                 file = files[i];
  45                 this.createSlide();
  46                 this.previewUploadedImage(file);
  47                 this.upload(file);
  48         }
  49 };
  50
  51
  52 DDFileUploader.prototype.createSlide = function() {
  53         var slide = document.createElement('span');
  54
  55         var a = document.createElement('a');
  56         a.href = '#';
  57         a.className = 'slide';
  58
  59         var img = document.createElement('img');
  60         this.previewImg = img;
  61         var size = this.thumbnailSize;
  62         var self = this;
  63         img.onload = function(evt) {
  64                 if (img.width > img.height) { // landscape
  65                         img.height = Math.round(size * img.height / img.width);
  66                         img.width = size;
  67                 }
  68                 else {
  69                         img.width = Math.round(size * img.width / img.height);
  70                         img.height = size;
  71                 }
  72                 img.style.marginLeft = Math.round((self.slideSize - img.width) / 2) + 'px';
  73                 img.style.marginTop = Math.round((self.slideSize - img.height) / 2) + 'px';
  74                 img.className = undefined;
  75         };
  76         a.appendChild(img);
  77
  78         var progressBar = document.createElement('span');
  79         progressBar.className = 'upload-progress';
  80
  81         slide.appendChild(a);
  82         slide.appendChild(progressBar);
  83         this.progressBar = progressBar;
  84         this.dropbox.appendChild(slide);
  85 };
  86
  87 DDFileUploader.prototype.updateProgressBar = function(progress) {
  88         // 0 <= progress <= 1
  89         var size = this.progressBarMaxSize * progress;
  90         size = Math.round(size);
  91         this.progressBar.style.width = size + 'px';
  92 };
  93
  94
  95 DDFileUploader.prototype.upload = function(file) {
  96         var reader = new FileReader();
  97         var req = new XMLHttpRequest();
  98         var self = this;
  99
 100         addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
 101         addListener(req.upload, 'load', function(evt){self.uploadCompleteHandler(evt);});
 102
 103         req.open("PUT", this.uploadUrl + '/' + file.name);
 104         req.setRequestHeader("Content-Type", file.type);
 105         addListener(reader, 'load', function(evt){req.sendAsBinary(evt.target.result);});
 106         reader.readAsBinaryString(file);
 107 };
 108
 109 DDFileUploader.prototype.uploadCompleteHandler = function(evt) {
 110         this.progressBar.parentNode.removeChild(this.progressBar);
 111 };
 112
 113 DDFileUploader.prototype.progressHandler = function(evt) {
 114         if (evt.lengthComputable) {
 115                 var progress = evt.loaded / evt.total;
 116                 this.updateProgressBar(progress);
 117                 this.previewImg.style.opacity=progress;
 118         }
 119 };
 120
 121 DDFileUploader.prototype.previewUploadedImage = function(file) {
 122         var reader = new FileReader();
 123         var img = this.previewImg;
 124         var size = this.thumbnailSize;
 125
 126         img.className = 'hidden';
 127
 128         reader.onload = function(evt) {
 129                 img.src = evt.target.result;
 130         };
 131         reader.readAsDataURL(file);
 132 };
 133
 134 }());