da5c08da8834ef4e1f23c427f0f786a6e823deb7
[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 // Drag and drop
19 DDFileUploader.prototype.dragenter = function(evt) {
20 disableDefault(evt);
21 disablePropagation(evt);
22 };
23
24 DDFileUploader.prototype.dragover = function(evt) {
25 disableDefault(evt);
26 disablePropagation(evt);
27 evt = getEventObject(evt);
28 var dt = evt.dataTransfer;
29 dt.dropEffect = 'copy';
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 // Methods about upload
42 DDFileUploader.prototype.handleFiles = function(files) {
43 var file, i;
44 for (i = 0; i < files.length; i++) {
45 file = files[i];
46 this.createSlide();
47 this.previewUploadedImage(file);
48 this.upload(file);
49 }
50 };
51
52 DDFileUploader.prototype.upload = function(file) {
53 var reader = new FileReader();
54 var req = new XMLHttpRequest();
55 var self = this;
56
57 addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
58 addListener(req.upload, 'load', function(evt){self.uploadCompleteHandler(evt);});
59
60 req.open("PUT", this.uploadUrl + '/' + file.name);
61 req.setRequestHeader("Content-Type", file.type);
62 addListener(reader, 'load', function(evt){req.sendAsBinary(evt.target.result);});
63 reader.readAsBinaryString(file);
64 };
65
66 DDFileUploader.prototype.uploadCompleteHandler = function(evt) {
67 this.progressBar.parentNode.removeChild(this.progressBar);
68 };
69
70 DDFileUploader.prototype.progressHandler = function(evt) {
71 if (evt.lengthComputable) {
72 var progress = evt.loaded / evt.total;
73 this.updateProgressBar(progress);
74 var currentOpacity = this.previewImg.style.opacity;
75 this.previewImg.style.opacity = Math.max(currentOpacity, progress);
76 }
77 };
78
79 // User interface
80 DDFileUploader.prototype.createSlide = function() {
81 var slide = document.createElement('span');
82
83 var a = document.createElement('a');
84 a.href = '#';
85 a.className = 'slide';
86
87 var img = document.createElement('img');
88 this.previewImg = img;
89 var size = this.thumbnailSize;
90 var self = this;
91 img.onload = function(evt) {
92 if (img.width > img.height) { // landscape
93 img.height = Math.round(size * img.height / img.width);
94 img.width = size;
95 }
96 else {
97 img.width = Math.round(size * img.width / img.height);
98 img.height = size;
99 }
100 img.style.marginLeft = Math.round((self.slideSize - img.width) / 2) + 'px';
101 img.style.marginTop = Math.round((self.slideSize - img.height) / 2) + 'px';
102 img.style.opacity = 0.2;
103 img.className = undefined;
104 };
105 a.appendChild(img);
106
107 var progressBar = document.createElement('span');
108 progressBar.className = 'upload-progress';
109
110 slide.appendChild(a);
111 slide.appendChild(progressBar);
112 this.progressBar = progressBar;
113 this.dropbox.appendChild(slide);
114 };
115
116 DDFileUploader.prototype.updateProgressBar = function(progress) {
117 // 0 <= progress <= 1
118 var size = this.progressBarMaxSize * progress;
119 size = Math.round(size);
120 this.progressBar.style.width = size + 'px';
121 };
122
123 DDFileUploader.prototype.previewUploadedImage = function(file) {
124 var reader = new FileReader();
125 var img = this.previewImg;
126 var size = this.thumbnailSize;
127
128 img.className = 'hidden';
129
130 reader.onload = function(evt) {
131 img.src = evt.target.result;
132 };
133 reader.readAsDataURL(file);
134 };
135
136 }());