6ee52d5d6540ea135865ba2e5be0027826c45924
[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.readAsBinaryString(file);
107 };
108
109 DDFileUploader.prototype.uploadCompleteHandler = function(evt) {
110 this.progressBar.parentNode.removeChild(this.progressBar);
111 };
112
113 DDFileUploader.prototype.progressHandler = function(evt) {
114 if (evt.lengthComputable) {
115 var progress = evt.loaded / evt.total;
116 this.updateProgressBar(progress);
117 this.previewImg.style.opacity=progress;
118 }
119 };
120
121 DDFileUploader.prototype.previewUploadedImage = function(file) {
122 var reader = new FileReader();
123 var img = this.previewImg;
124 var size = this.thumbnailSize;
125
126 img.className = 'hidden';
127
128 reader.onload = function(evt) {
129 img.src = evt.target.result;
130 };
131 reader.readAsDataURL(file);
132 };
133
134 }());