Un peu de ménage, opacité progressive, lors de l'upload.
[Plinn.git] / skins / fileupload.js
1 // © 2013 Benoît Pin MINES ParisTech
2 var DDFileUploader;
3
4 (function(){
5
6 DDFileUploader = function(dropbox, uploadUrl) {
7 this.dropbox = dropbox;
8 this.uploadUrl = uploadUrl;
9 this.slideSize = 222;
10 this.progressBarMaxSize = 200; // pixels
11 this.thumbnailSize = 180;
12 var self = this;
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);});
16 };
17
18 DDFileUploader.prototype.dragenter = function(evt) {
19 disableDefault(evt);
20 disablePropagation(evt);
21 };
22
23 DDFileUploader.prototype.dragover = function(evt) {
24 disableDefault(evt);
25 disablePropagation(evt);
26 evt = getEventObject(evt);
27 var dt = evt.dataTransfer;
28 dt.dropEffect = 'copy';
29 };
30
31
32 DDFileUploader.prototype.drop = function(evt) {
33 disableDefault(evt);
34 disablePropagation(evt);
35 getEventObject(evt);
36 var dt = evt.dataTransfer;
37 dt.dropEffect = 'copy';
38 this.handleFiles(dt.files);
39 };
40
41 DDFileUploader.prototype.handleFiles = function(files) {
42 var file, i;
43 for (i = 0; i < files.length; i++) {
44 file = files[i];
45 this.createSlide();
46 this.previewUploadedImage(file);
47 this.upload(file);
48 }
49 };
50
51
52 DDFileUploader.prototype.createSlide = function() {
53 var slide = document.createElement('span');
54
55 var a = document.createElement('a');
56 a.href = '#';
57 a.className = 'slide';
58
59 var img = document.createElement('img');
60 this.previewImg = img;
61 var size = this.thumbnailSize;
62 var self = this;
63 img.onload = function(evt) {
64 if (img.width > img.height) { // landscape
65 img.height = Math.round(size * img.height / img.width);
66 img.width = size;
67 }
68 else {
69 img.width = Math.round(size * img.width / img.height);
70 img.height = size;
71 }
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;
75 };
76 a.appendChild(img);
77
78 var progressBar = document.createElement('span');
79 progressBar.className = 'upload-progress';
80
81 slide.appendChild(a);
82 slide.appendChild(progressBar);
83 this.progressBar = progressBar;
84 this.dropbox.appendChild(slide);
85 };
86
87 DDFileUploader.prototype.updateProgressBar = function(progress) {
88 // 0 <= progress <= 1
89 var size = this.progressBarMaxSize * progress;
90 size = Math.round(size);
91 this.progressBar.style.width = size + 'px';
92 }
93
94
95 DDFileUploader.prototype.upload = function(file) {
96 var reader = new FileReader();
97 var req = new XMLHttpRequest();
98 var self = this;
99
100 addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
101 addListener(req.upload, 'load', function(evt){self.uploadCompleteHandler(evt);});
102
103 req.open("PUT", this.uploadUrl + '/' + file.name);
104 req.setRequestHeader("Content-Type", file.type);
105 addListener(reader, 'load', function(evt){req.sendAsBinary(evt.target.result);})
106 // reader.onload = function(evt) {
107 // req.sendAsBinary(evt.target.result);
108 // };
109 reader.readAsBinaryString(file);
110 };
111
112 DDFileUploader.prototype.uploadCompleteHandler = function(evt) {
113 this.progressBar.parentNode.removeChild(this.progressBar);
114 };
115
116 DDFileUploader.prototype.progressHandler = function(evt) {
117 if (evt.lengthComputable) {
118 var progress = evt.loaded / evt.total;
119 this.updateProgressBar(progress);
120 this.previewImg.style.opacity=progress;
121 }
122 };
123
124 DDFileUploader.prototype.previewUploadedImage = function(file) {
125 var reader = new FileReader();
126 var img = this.previewImg;
127 var size = this.thumbnailSize;
128
129 img.className = 'hidden';
130
131 reader.onload = function(evt) {
132 img.src = evt.target.result;
133 };
134 reader.readAsDataURL(file);
135 };
136
137 }());