8f6eeda41950d841db48ea7c1399328fa6dce6ad
[Portfolio.git] / skins / fileupload.js
1 // © 2013 Benoît Pin MINES ParisTech
2 var DDFileUploader;
3
4 (function(){
5 // nombre maximun d'image chargées en local
6 var MAX_PREVIEW = 2;
7
8 DDFileUploader = function(dropbox, uploadUrl) {
9 this.dropbox = dropbox;
10 this.uploadUrl = uploadUrl;
11 this.slideSize = 222;
12 this.progressBarMaxSize = 200; // pixels
13 this.thumbnailSize = 180;
14 this.previewQueue = [];
15 this._previewQueueRunning = false;
16 this.previewsLoaded = 0;
17 this.uploadQueue = [];
18 this._uploadQueueRunning = false;
19 var self = this;
20 addListener(dropbox, 'dragenter', function(evt){self.dragenter(evt);});
21 addListener(dropbox, 'dragover', function(evt){self.dragover(evt);});
22 addListener(dropbox, 'drop', function(evt){self.drop(evt);});
23 };
24
25 // Drag and drop
26 DDFileUploader.prototype.dragenter = function(evt) {
27 disableDefault(evt);
28 disablePropagation(evt);
29 };
30
31 DDFileUploader.prototype.dragover = function(evt) {
32 disableDefault(evt);
33 disablePropagation(evt);
34 evt = getEventObject(evt);
35 var dt = evt.dataTransfer;
36 dt.dropEffect = 'copy';
37 };
38
39 DDFileUploader.prototype.drop = function(evt) {
40 disableDefault(evt);
41 disablePropagation(evt);
42 getEventObject(evt);
43 var dt = evt.dataTransfer;
44 dt.dropEffect = 'copy';
45 this.handleFiles(dt.files);
46 };
47
48 // Methods about upload
49 DDFileUploader.prototype.handleFiles = function(files) {
50 var file, i, slide;
51 for (i = 0; i < files.length; i++) {
52 file = files[i];
53 slide = this.createSlide(file);
54 this.previewQueuePush(slide);
55 this.uploadQueuePush(slide);
56 }
57 };
58
59 DDFileUploader.prototype.upload = function(slide) {
60 var reader = new FileReader();
61 var req = new XMLHttpRequest();
62 var file = slide.file;
63 this.uploadedSlide = slide;
64 this.previewImg = slide.img;
65 this.progressBar = slide.progressBar;
66 var self = this;
67
68 addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
69 addListener(req, 'readystatechange',
70 function(evt) {
71 if (req.readyState === 4) {
72 self.uploadCompleteHandler(req);
73 }
74 });
75
76 req.open("PUT", this.uploadUrl);
77 req.setRequestHeader("Content-Type", file.type);
78 req.setRequestHeader("X-File-Name", file.name);
79 addListener(reader, 'load',
80 function(evt){
81 try {
82 req.sendAsBinary(evt.target.result);
83 }
84 catch(e){}
85 });
86 reader.readAsBinaryString(file);
87 };
88
89 DDFileUploader.prototype.uploadCompleteHandler = function(req) {
90 var slide = this.uploadedSlide;
91 this.uploadedSlide.removeChild(slide.label);
92 this.uploadedSlide.removeChild(slide.progressBar);
93 var fragment = getCopyOfNode(req.responseXML.documentElement.firstChild);
94 var img = fragment.getElementsByTagName('img')[0];
95 img.onload = function(evt) {
96 var preview = slide.getElementsByTagName('img')[0];
97 preview.src = undefined;
98 slide.parentNode.replaceChild(fragment, slide);
99 };
100 this.previewsLoaded--;
101 this.previewQueueLoadNext();
102 this.uploadQueueLoadNext();
103 };
104
105 DDFileUploader.prototype.progressHandler = function(evt) {
106 if (evt.lengthComputable) {
107 var progress = evt.loaded / evt.total;
108 this.updateProgressBar(progress);
109 var currentOpacity = this.previewImg.style.opacity;
110 this.previewImg.style.opacity = Math.max(currentOpacity, progress);
111 }
112 };
113
114 // Method about queues
115
116 DDFileUploader.prototype.previewQueuePush = function(slide) {
117 this.previewQueue.push(slide);
118 if (!this._previewQueueRunning) {
119 this.startPreviewQueue();
120 }
121 };
122
123 DDFileUploader.prototype.startPreviewQueue = function() {
124 this._previewQueueRunning = true;
125 this.previewQueueLoadNext();
126 };
127
128 DDFileUploader.prototype.previewQueueLoadNext = function() {
129 if (this.previewQueue.length && this.previewsLoaded < MAX_PREVIEW) {
130 var slide = this.previewQueue.shift();
131 this.previewUploadedImage(slide);
132 this.previewsLoaded++;
133 }
134 else {
135 this._previewQueueRunning = false;
136 }
137 };
138
139 DDFileUploader.prototype.uploadQueuePush = function(slide) {
140 this.uploadQueue.push(slide);
141 if (!this._uploadQueueRunning) {
142 this.startUploadQueue();
143 }
144 };
145
146 DDFileUploader.prototype.startUploadQueue = function() {
147 this._uploadQueueRunning = true;
148 this.uploadQueueLoadNext();
149 };
150
151
152 DDFileUploader.prototype.uploadQueueLoadNext = function() {
153 var slide = this.uploadQueue.shift();
154 if (slide) {
155 this.upload(slide);
156 }
157 else {
158 this._uploadQueueRunning = false;
159 }
160 };
161
162
163 // User interface
164 DDFileUploader.prototype.createSlide = function(file) {
165 var slide = document.createElement('span');
166 slide.file = file;
167
168 var a = document.createElement('a');
169 a.href = '#';
170 a.className = 'slide';
171
172 var img = document.createElement('img');
173 img.className = 'hidden';
174 var size = this.thumbnailSize;
175 var self = this;
176 img.onload = function(evt) {
177 if (img.width > img.height) { // landscape
178 img.height = Math.round(size * img.height / img.width);
179 img.width = size;
180 }
181 else {
182 img.width = Math.round(size * img.width / img.height);
183 img.height = size;
184 }
185 img.style.marginLeft = Math.floor((self.slideSize - img.width) / 2) + 'px';
186 img.style.marginTop = Math.floor((self.slideSize - img.height) / 2) + 'px';
187 img.style.opacity = 0.2;
188 img.className = undefined;
189 };
190 a.appendChild(img);
191 slide.img = img;
192
193 var label = document.createElement('span');
194 slide.label = label;
195 label.className = 'label';
196 label.innerHTML = file.name;
197
198 var progressBar = document.createElement('span');
199 progressBar.className = 'upload-progress';
200 slide.progressBar = progressBar;
201
202 slide.appendChild(a);
203 slide.appendChild(progressBar);
204 slide.appendChild(label);
205 this.dropbox.appendChild(slide);
206
207 return slide;
208 };
209
210 DDFileUploader.prototype.updateProgressBar = function(progress) {
211 // 0 <= progress <= 1
212 var size = this.progressBarMaxSize * progress;
213 size = Math.round(size);
214 this.progressBar.style.width = size + 'px';
215 };
216
217 DDFileUploader.prototype.previewUploadedImage = function(slide) {
218 var reader = new FileReader();
219 var size = this.thumbnailSize;
220 var self = this;
221
222 reader.onload = function(evt) {
223 slide.img.src = evt.target.result;
224 setTimeout(function(){self.previewQueueLoadNext();}, 500);
225 };
226 reader.readAsDataURL(slide.file);
227 };
228
229 }());