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 // Drag and drop
  19 DDFileUploader.prototype.dragenter = function(evt) {
  20         disableDefault(evt);
  21         disablePropagation(evt);
  22 };
  23
  24 DDFileUploader.prototype.dragover = function(evt) {
  25         disableDefault(evt);
  26         disablePropagation(evt);
  27         evt = getEventObject(evt);
  28         var dt = evt.dataTransfer;
  29         dt.dropEffect = 'copy';
  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 // Methods about upload
  42 DDFileUploader.prototype.handleFiles = function(files) {
  43         var file, i;
  44         for (i = 0; i < files.length; i++) {
  45                 file = files[i];
  46                 this.createSlide();
  47                 this.previewUploadedImage(file);
  48                 this.upload(file);
  49         }
  50 };
  51
  52 DDFileUploader.prototype.upload = function(file) {
  53         var reader = new FileReader();
  54         var req = new XMLHttpRequest();
  55         var self = this;
  56
  57         addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
  58         addListener(req.upload, 'load', function(evt){self.uploadCompleteHandler(evt);});
  59
  60         req.open("PUT", this.uploadUrl + '/' + file.name);
  61         req.setRequestHeader("Content-Type", file.type);
  62         addListener(reader, 'load', function(evt){req.sendAsBinary(evt.target.result);});
  63         reader.readAsBinaryString(file);
  64 };
  65
  66 DDFileUploader.prototype.uploadCompleteHandler = function(evt) {
  67         this.progressBar.parentNode.removeChild(this.progressBar);
  68 };
  69
  70 DDFileUploader.prototype.progressHandler = function(evt) {
  71         if (evt.lengthComputable) {
  72                 var progress = evt.loaded / evt.total;
  73                 this.updateProgressBar(progress);
  74                 var currentOpacity = this.previewImg.style.opacity;
  75                 this.previewImg.style.opacity = Math.max(currentOpacity, progress);
  76         }
  77 };
  78
  79 // User interface
  80 DDFileUploader.prototype.createSlide = function() {
  81         var slide = document.createElement('span');
  82
  83         var a = document.createElement('a');
  84         a.href = '#';
  85         a.className = 'slide';
  86
  87         var img = document.createElement('img');
  88         this.previewImg = img;
  89         var size = this.thumbnailSize;
  90         var self = this;
  91         img.onload = function(evt) {
  92                 if (img.width > img.height) { // landscape
  93                         img.height = Math.round(size * img.height / img.width);
  94                         img.width = size;
  95                 }
  96                 else {
  97                         img.width = Math.round(size * img.width / img.height);
  98                         img.height = size;
  99                 }
 100                 img.style.marginLeft = Math.round((self.slideSize - img.width) / 2) + 'px';
 101                 img.style.marginTop = Math.round((self.slideSize - img.height) / 2) + 'px';
 102                 img.style.opacity = 0.2;
 103                 img.className = undefined;
 104         };
 105         a.appendChild(img);
 106
 107         var progressBar = document.createElement('span');
 108         progressBar.className = 'upload-progress';
 109
 110         slide.appendChild(a);
 111         slide.appendChild(progressBar);
 112         this.progressBar = progressBar;
 113         this.dropbox.appendChild(slide);
 114 };
 115
 116 DDFileUploader.prototype.updateProgressBar = function(progress) {
 117         // 0 <= progress <= 1
 118         var size = this.progressBarMaxSize * progress;
 119         size = Math.round(size);
 120         this.progressBar.style.width = size + 'px';
 121 };
 122
 123 DDFileUploader.prototype.previewUploadedImage = function(file) {
 124         var reader = new FileReader();
 125         var img = this.previewImg;
 126         var size = this.thumbnailSize;
 127
 128         img.className = 'hidden';
 129
 130         reader.onload = function(evt) {
 131                 img.src = evt.target.result;
 132         };
 133         reader.readAsDataURL(file);
 134 };
 135
 136 }());