Affichage barre de progression et image en local lors de l'upload.
[Plinn.git] / 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 }());