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.upload.addEventListener("load", function(e){
 104         //   self.ctrl.update(100);
 105         //   var canvas = self.ctrl.ctx.canvas;
 106         //   canvas.parentNode.removeChild(canvas);
 107         //  }, false);
 108         req.open("PUT", this.uploadUrl + '/' + file.name);
 109         req.setRequestHeader("Content-Type", file.type);
 110         // req.overrideMimeType('text/plain; charset=x-user-defined-binary');
 111         reader.onload = function(evt) {
 112                 req.sendAsBinary(evt.target.result);
 113         };
 114         reader.readAsBinaryString(file);
 115 };
 116
 117 DDFileUploader.prototype.uploadCompleteHandler = function(evt) {
 118         this.progressBar.parentNode.removeChild(this.progressBar);
 119 };
 120
 121 DDFileUploader.prototype.progressHandler = function(evt) {
 122         if (evt.lengthComputable)
 123                 this.updateProgressBar(evt.loaded / evt.total);
 124 };
 125
 126 DDFileUploader.prototype.previewUploadedImage = function(file) {
 127         var reader = new FileReader();
 128         var img = this.previewImg;
 129         var size = this.thumbnailSize;
 130
 131         img.className = 'hidden';
 132
 133         reader.onload = function(evt) {
 134                 img.src = evt.target.result;
 135         };
 136         reader.readAsDataURL(file);
 137 };
 138
 139 }());