2b6c4a8842be47489fac15423de92d2ea613bead
1 // © 2013 Benoît Pin MINES ParisTech
5 // nombre maximun d'image chargées en local
8 DDFileUploader = function(dropbox
, uploadUrl
) {
9 this.dropbox
= dropbox
;
10 this.uploadUrl
= uploadUrl
;
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;
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
);});
26 DDFileUploader
.prototype.dragenter = function(evt
) {
28 disablePropagation(evt
);
31 DDFileUploader
.prototype.dragover = function(evt
) {
33 disablePropagation(evt
);
34 evt
= getEventObject(evt
);
35 var dt
= evt
.dataTransfer
;
36 dt
.dropEffect
= 'copy';
39 DDFileUploader
.prototype.drop = function(evt
) {
41 disablePropagation(evt
);
43 var dt
= evt
.dataTransfer
;
44 dt
.dropEffect
= 'copy';
45 this.handleFiles(dt
.files
);
48 // Methods about upload
49 DDFileUploader
.prototype.handleFiles = function(files
) {
51 for (i
= 0; i
< files
.length
; i
++) {
53 slide
= this.createSlide(file
);
54 this.previewQueuePush(slide
);
55 this.uploadQueuePush(slide
);
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
;
68 addListener(req
.upload
, 'progress', function(evt
){self
.progressHandler(evt
);});
69 addListener(req
, 'readystatechange',
71 if (req
.readyState
=== 4) {
72 self
.uploadCompleteHandler(req
);
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',
82 req
.sendAsBinary(evt
.target
.result
);
86 reader
.readAsBinaryString(file
);
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 slide
.parentNode
.replaceChild(fragment
, slide
);
98 this.previewsLoaded
--;
99 this.previewQueueLoadNext();
100 this.uploadQueueLoadNext();
103 DDFileUploader
.prototype.progressHandler = function(evt
) {
104 if (evt
.lengthComputable
) {
105 var progress
= evt
.loaded
/ evt
.total
;
106 this.updateProgressBar(progress
);
107 var currentOpacity
= this.previewImg
.style
.opacity
;
108 this.previewImg
.style
.opacity
= Math
.max(currentOpacity
, progress
);
112 // Method about queues
114 DDFileUploader
.prototype.previewQueuePush = function(slide
) {
115 this.previewQueue
.push(slide
);
116 if (!this._previewQueueRunning
) {
117 this.startPreviewQueue();
121 DDFileUploader
.prototype.startPreviewQueue = function() {
122 this._previewQueueRunning
= true;
123 this.previewQueueLoadNext();
126 DDFileUploader
.prototype.previewQueueLoadNext = function() {
127 if (this.previewQueue
.length
&& this.previewsLoaded
< MAX_PREVIEW
) {
128 var slide
= this.previewQueue
.shift();
129 this.previewUploadedImage(slide
);
130 this.previewsLoaded
++;
133 this._previewQueueRunning
= false;
137 DDFileUploader
.prototype.uploadQueuePush = function(slide
) {
138 this.uploadQueue
.push(slide
);
139 if (!this._uploadQueueRunning
) {
140 this.startUploadQueue();
144 DDFileUploader
.prototype.startUploadQueue = function() {
145 this._uploadQueueRunning
= true;
146 this.uploadQueueLoadNext();
150 DDFileUploader
.prototype.uploadQueueLoadNext = function() {
151 var slide
= this.uploadQueue
.shift();
156 this._uploadQueueRunning
= false;
162 DDFileUploader
.prototype.createSlide = function(file
) {
163 var slide
= document
.createElement('span');
166 var a
= document
.createElement('a');
168 a
.className
= 'slide';
170 var img
= document
.createElement('img');
171 img
.className
= 'hidden';
172 var size
= this.thumbnailSize
;
174 img
.onload = function(evt
) {
175 if (img
.width
> img
.height
) { // landscape
176 img
.height
= Math
.round(size
* img
.height
/ img
.width
);
180 img
.width
= Math
.round(size
* img
.width
/ img
.height
);
183 img
.style
.marginLeft
= Math
.floor((self
.slideSize
- img
.width
) / 2) + 'px';
184 img
.style
.marginTop
= Math
.floor((self
.slideSize
- img
.height
) / 2) + 'px';
185 img
.style
.opacity
= 0.2;
186 img
.className
= undefined;
191 var label
= document
.createElement('span');
193 label
.className
= 'label';
194 label
.innerHTML
= file
.name
;
196 var progressBar
= document
.createElement('span');
197 progressBar
.className
= 'upload-progress';
198 slide
.progressBar
= progressBar
;
200 slide
.appendChild(a
);
201 slide
.appendChild(progressBar
);
202 slide
.appendChild(label
);
203 this.dropbox
.appendChild(slide
);
208 DDFileUploader
.prototype.updateProgressBar = function(progress
) {
209 // 0 <= progress <= 1
210 var size
= this.progressBarMaxSize
* progress
;
211 size
= Math
.round(size
);
212 this.progressBar
.style
.width
= size
+ 'px';
215 DDFileUploader
.prototype.previewUploadedImage = function(slide
) {
216 var reader
= new FileReader();
217 var size
= this.thumbnailSize
;
220 reader
.onload = function(evt
) {
221 slide
.img
.src
= evt
.target
.result
;
222 setTimeout(function(){self
.previewQueueLoadNext();}, 500);
224 reader
.readAsDataURL(slide
.file
);