0d2ce8cd0e97d04cc78849362fedba989579da18
1 // © 2013 Benoît Pin MINES ParisTech
6 DDFileUploader = function(dropbox
, uploadUrl
) {
7 this.dropbox
= dropbox
;
8 this.uploadUrl
= uploadUrl
;
10 this.progressBarMaxSize
= 200; // pixels
11 this.thumbnailSize
= 180;
12 this.previewQueue
= [];
13 this._previewQueueRunning
= false;
14 this.uploadQueue
= [];
15 this._uploadQueueRunning
= false;
17 addListener(dropbox
, 'dragenter', function(evt
){self
.dragenter(evt
);});
18 addListener(dropbox
, 'dragover', function(evt
){self
.dragover(evt
);});
19 addListener(dropbox
, 'drop', function(evt
){self
.drop(evt
);});
23 DDFileUploader
.prototype.dragenter = function(evt
) {
25 disablePropagation(evt
);
28 DDFileUploader
.prototype.dragover = function(evt
) {
30 disablePropagation(evt
);
31 evt
= getEventObject(evt
);
32 var dt
= evt
.dataTransfer
;
33 dt
.dropEffect
= 'copy';
36 DDFileUploader
.prototype.drop = function(evt
) {
38 disablePropagation(evt
);
40 var dt
= evt
.dataTransfer
;
41 dt
.dropEffect
= 'copy';
42 this.handleFiles(dt
.files
);
45 // Methods about upload
46 DDFileUploader
.prototype.handleFiles = function(files
) {
48 for (i
= 0; i
< files
.length
; i
++) {
50 slide
= this.createSlide(file
);
51 // this.previewQueuePush(slide);
52 this.uploadQueuePush(slide
);
56 DDFileUploader
.prototype.upload = function(slide
) {
57 var reader
= new FileReader();
58 var req
= new XMLHttpRequest();
59 var file
= slide
.file
;
60 this.uploadedSlide
= slide
;
61 this.previewImg
= slide
.img
;
62 this.progressBar
= slide
.progressBar
;
65 addListener(req
.upload
, 'progress', function(evt
){self
.progressHandler(evt
);});
66 addListener(req
.upload
, 'load', function(evt
){self
.uploadCompleteHandler(evt
);});
68 req
.open("PUT", this.uploadUrl
);
69 req
.setRequestHeader("Content-Type", file
.type
);
70 req
.setRequestHeader("X-File-Name", file
.name
);
71 addListener(reader
, 'load',
75 req
.sendAsBinary(evt
.target
.result
);
79 reader
.readAsBinaryString(file
);
82 DDFileUploader
.prototype.uploadCompleteHandler = function(evt
) {
83 var slide
= this.uploadedSlide
;
84 this.uploadedSlide
.removeChild(slide
.label
);
85 this.uploadedSlide
.removeChild(slide
.progressBar
);
86 this.uploadQueueLoadNext();
89 DDFileUploader
.prototype.progressHandler = function(evt
) {
90 if (evt
.lengthComputable
) {
91 var progress
= evt
.loaded
/ evt
.total
;
92 this.updateProgressBar(progress
);
93 var currentOpacity
= this.previewImg
.style
.opacity
;
94 this.previewImg
.style
.opacity
= Math
.max(currentOpacity
, progress
);
98 // Method about queues
100 DDFileUploader
.prototype.previewQueuePush = function(slide
) {
101 this.previewQueue
.push(slide
);
102 if (!this._previewQueueRunning
) {
103 this.startPreviewQueue();
107 DDFileUploader
.prototype.startPreviewQueue = function() {
108 this._previewQueueRunning
= true;
109 this.previewQueueLoadNext();
112 DDFileUploader
.prototype.previewQueueLoadNext = function() {
113 var slide
= this.previewQueue
.shift();
115 this.previewUploadedImage(slide
);
118 this._previewQueueRunning
= false;
122 DDFileUploader
.prototype.uploadQueuePush = function(slide
) {
123 this.uploadQueue
.push(slide
);
124 if (!this._uploadQueueRunning
) {
125 this.startUploadQueue();
129 DDFileUploader
.prototype.startUploadQueue = function() {
130 this._uploadQueueRunning
= true;
131 this.uploadQueueLoadNext();
135 DDFileUploader
.prototype.uploadQueueLoadNext = function() {
136 var slide
= this.uploadQueue
.shift();
141 this._uploadQueueRunning
= false;
147 DDFileUploader
.prototype.createSlide = function(file
) {
148 var slide
= document
.createElement('span');
151 var a
= document
.createElement('a');
153 a
.className
= 'slide';
155 var img
= document
.createElement('img');
156 img
.className
= 'hidden';
157 var size
= this.thumbnailSize
;
159 img
.onload = function(evt
) {
160 if (img
.width
> img
.height
) { // landscape
161 img
.height
= Math
.round(size
* img
.height
/ img
.width
);
165 img
.width
= Math
.round(size
* img
.width
/ img
.height
);
168 img
.style
.marginLeft
= Math
.round((self
.slideSize
- img
.width
) / 2) + 'px';
169 img
.style
.marginTop
= Math
.round((self
.slideSize
- img
.height
) / 2) + 'px';
170 img
.style
.opacity
= 0.2;
171 img
.className
= undefined;
176 var label
= document
.createElement('span');
178 label
.className
= 'label';
179 label
.innerHTML
= file
.name
;
181 var progressBar
= document
.createElement('span');
182 progressBar
.className
= 'upload-progress';
183 slide
.progressBar
= progressBar
;
185 slide
.appendChild(a
);
186 slide
.appendChild(progressBar
);
187 slide
.appendChild(label
);
188 this.dropbox
.appendChild(slide
);
193 DDFileUploader
.prototype.updateProgressBar = function(progress
) {
194 // 0 <= progress <= 1
195 var size
= this.progressBarMaxSize
* progress
;
196 size
= Math
.round(size
);
197 this.progressBar
.style
.width
= size
+ 'px';
200 DDFileUploader
.prototype.previewUploadedImage = function(slide
) {
201 var reader
= new FileReader();
202 var size
= this.thumbnailSize
;
205 reader
.onload = function(evt
) {
206 slide
.img
.src
= evt
.target
.result
;
207 setTimeout(function(){self
.previewQueueLoadNext();}, 500);
209 reader
.readAsDataURL(slide
.file
);