75c6c6f5858dcfb8e5dda298b3c0321e8c2a37bc
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;
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
);});
18 DDFileUploader
.prototype.dragenter = function(evt
) {
20 disablePropagation(evt
);
23 DDFileUploader
.prototype.dragover = function(evt
) {
25 disablePropagation(evt
);
26 evt
= getEventObject(evt
);
27 var dt
= evt
.dataTransfer
;
28 dt
.dropEffect
= 'copy';
32 DDFileUploader
.prototype.drop = function(evt
) {
34 disablePropagation(evt
);
36 var dt
= evt
.dataTransfer
;
37 dt
.dropEffect
= 'copy';
38 this.handleFiles(dt
.files
);
41 DDFileUploader
.prototype.handleFiles = function(files
) {
43 for (i
= 0; i
< files
.length
; i
++) {
46 this.previewUploadedImage(file
);
52 DDFileUploader
.prototype.createSlide = function() {
53 var slide
= document
.createElement('span');
55 var a
= document
.createElement('a');
57 a
.className
= 'slide';
59 var img
= document
.createElement('img');
60 this.previewImg
= img
;
61 var size
= this.thumbnailSize
;
63 img
.onload = function(evt
) {
64 if (img
.width
> img
.height
) { // landscape
65 img
.height
= Math
.round(size
* img
.height
/ img
.width
);
69 img
.width
= Math
.round(size
* img
.width
/ img
.height
);
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;
78 var progressBar
= document
.createElement('span');
79 progressBar
.className
= 'upload-progress';
82 slide
.appendChild(progressBar
);
83 this.progressBar
= progressBar
;
84 this.dropbox
.appendChild(slide
);
87 DDFileUploader
.prototype.updateProgressBar = function(progress
) {
89 var size
= this.progressBarMaxSize
* progress
;
90 size
= Math
.round(size
);
91 this.progressBar
.style
.width
= size
+ 'px';
95 DDFileUploader
.prototype.upload = function(file
) {
96 var reader
= new FileReader();
97 var req
= new XMLHttpRequest();
100 addListener(req
.upload
, 'progress', function(evt
){self
.progressHandler(evt
);});
101 addListener(req
.upload
, 'load', function(evt
){self
.uploadCompleteHandler(evt
);});
103 // req.upload.addEventListener("load", function(e){
104 // self.ctrl.update(100);
105 // var canvas = self.ctrl.ctx.canvas;
106 // canvas.parentNode.removeChild(canvas);
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
);
114 reader
.readAsBinaryString(file
);
117 DDFileUploader
.prototype.uploadCompleteHandler = function(evt
) {
118 this.progressBar
.parentNode
.removeChild(this.progressBar
);
121 DDFileUploader
.prototype.progressHandler = function(evt
) {
122 if (evt
.lengthComputable
)
123 this.updateProgressBar(evt
.loaded
/ evt
.total
);
126 DDFileUploader
.prototype.previewUploadedImage = function(file
) {
127 var reader
= new FileReader();
128 var img
= this.previewImg
;
129 var size
= this.thumbnailSize
;
131 img
.className
= 'hidden';
133 reader
.onload = function(evt
) {
134 img
.src
= evt
.target
.result
;
136 reader
.readAsDataURL(file
);