7229df90cadbebcfbfa7003cc378257531c5e978
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
);
53 // this.previewUploadedImage(file);
58 DDFileUploader
.prototype.upload = function(slide
) {
59 var reader
= new FileReader();
60 var req
= new XMLHttpRequest();
61 var file
= slide
.file
;
62 this.previewImg
= slide
.img
;
63 this.progressBar
= slide
.progressBar
;
66 addListener(req
.upload
, 'progress', function(evt
){self
.progressHandler(evt
);});
67 addListener(req
.upload
, 'load', function(evt
){self
.uploadCompleteHandler(evt
);});
69 req
.open("PUT", this.uploadUrl
+ '/' + file
.name
);
70 req
.setRequestHeader("Content-Type", file
.type
);
71 addListener(reader
, 'load', function(evt
){req
.sendAsBinary(evt
.target
.result
);});
72 reader
.readAsBinaryString(file
);
75 DDFileUploader
.prototype.uploadCompleteHandler = function(evt
) {
76 this.progressBar
.parentNode
.removeChild(this.progressBar
);
77 this.uploadQueueLoadNext();
80 DDFileUploader
.prototype.progressHandler = function(evt
) {
81 if (evt
.lengthComputable
) {
82 var progress
= evt
.loaded
/ evt
.total
;
83 this.updateProgressBar(progress
);
84 var currentOpacity
= this.previewImg
.style
.opacity
;
85 this.previewImg
.style
.opacity
= Math
.max(currentOpacity
, progress
);
89 // Method about queues
91 DDFileUploader
.prototype.previewQueuePush = function(slide
) {
92 this.previewQueue
.push(slide
);
93 if (!this._previewQueueRunning
)
94 this.startPreviewQueue();
97 DDFileUploader
.prototype.startPreviewQueue = function() {
98 this._previewQueueRunning
= true;
99 this.previewQueueLoadNext();
102 DDFileUploader
.prototype.previewQueueLoadNext = function() {
103 var slide
= this.previewQueue
.shift();
105 this.previewUploadedImage(slide
);
107 this._previewQueueRunning
= false;
110 DDFileUploader
.prototype.uploadQueuePush = function(slide
) {
111 this.uploadQueue
.push(slide
);
112 if (!this._uploadQueueRunning
)
113 this.startUploadQueue();
116 DDFileUploader
.prototype.startUploadQueue = function() {
117 this._uploadQueueRunning
= true;
118 this.uploadQueueLoadNext();
122 DDFileUploader
.prototype.uploadQueueLoadNext = function() {
123 var slide
= this.uploadQueue
.shift();
127 this._uploadQueueRunning
= false;
132 DDFileUploader
.prototype.createSlide = function(file
) {
133 var slide
= document
.createElement('span');
136 var a
= document
.createElement('a');
138 a
.className
= 'slide';
140 var img
= document
.createElement('img');
141 img
.className
= 'hidden';
142 var size
= this.thumbnailSize
;
144 img
.onload = function(evt
) {
145 console
.info('createSlide loaded.')
146 if (img
.width
> img
.height
) { // landscape
147 img
.height
= Math
.round(size
* img
.height
/ img
.width
);
151 img
.width
= Math
.round(size
* img
.width
/ img
.height
);
154 img
.style
.marginLeft
= Math
.round((self
.slideSize
- img
.width
) / 2) + 'px';
155 img
.style
.marginTop
= Math
.round((self
.slideSize
- img
.height
) / 2) + 'px';
156 img
.style
.opacity
= 0.2;
157 img
.className
= undefined;
162 var progressBar
= document
.createElement('span');
163 progressBar
.className
= 'upload-progress';
164 slide
.progressBar
= progressBar
;
166 slide
.appendChild(a
);
167 slide
.appendChild(progressBar
);
168 // this.progressBar = progressBar;
169 this.dropbox
.appendChild(slide
);
174 DDFileUploader
.prototype.updateProgressBar = function(progress
) {
175 // 0 <= progress <= 1
176 var size
= this.progressBarMaxSize
* progress
;
177 size
= Math
.round(size
);
178 this.progressBar
.style
.width
= size
+ 'px';
181 DDFileUploader
.prototype.previewUploadedImage = function(slide
) {
182 var reader
= new FileReader();
183 var size
= this.thumbnailSize
;
186 reader
.onload = function(evt
) {
187 console
.info('previewUploadedImage loaded.')
188 slide
.img
.src
= evt
.target
.result
;
189 setTimeout(function(){self
.previewQueueLoadNext();}, 1000);
190 // self.previewQueueLoadNext();
192 reader
.readAsDataURL(slide
.file
);