0aebb3eb5c82a6adcc2a0740514a244dfddaa0a3
[Portfolio.git] / skins / fileupload.js
1 // © 2013 Benoît Pin MINES ParisTech
2 var DDFileUploaderBase;
3
4 (function(){
5
6 DDFileUploaderBase = function(dropbox, uploadUrl) {
7 this.dropbox = dropbox;
8 this.uploadUrl = uploadUrl;
9 this.uploadQueue = [];
10 this._uploadQueueRunning = false;
11 var self = this;
12 addListener(dropbox, 'dragenter', function(evt){self.dragenter(evt);});
13 addListener(dropbox, 'dragover', function(evt){self.dragover(evt);});
14 addListener(dropbox, 'drop', function(evt){self.drop(evt);});
15 };
16
17 // Drag and drop
18 DDFileUploaderBase.prototype.dragenter = function(evt) {
19 disableDefault(evt);
20 disablePropagation(evt);
21 };
22
23 DDFileUploaderBase.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 DDFileUploaderBase.prototype.drop = function(evt) {
32 disableDefault(evt);
33 disablePropagation(evt);
34 getEventObject(evt);
35 var dt = evt.dataTransfer;
36 dt.dropEffect = 'copy';
37 this.handleFiles(dt.files);
38 };
39
40 // Methods about upload
41 DDFileUploaderBase.prototype.handleFiles = function(files) {
42 // To be implemented by descendant.
43 };
44
45
46
47 DDFileUploaderBase.prototype.beforeUpload = function(item) {
48 // To be implemented by decendant.
49 };
50
51
52 DDFileUploaderBase.prototype.upload = function(item) {
53 // item.file must be the file to be uploaded
54 this.beforeUpload(item);
55 var reader = new FileReader();
56 var req = new XMLHttpRequest();
57 var file = item.file;
58
59 var self = this;
60
61 addListener(req.upload, 'progress', function(evt){self.progressHandler(evt);});
62 addListener(req, 'readystatechange',
63 function(evt) {
64 if (req.readyState === 4) {
65 self.uploadCompleteHandler(req);
66 }
67 });
68
69 req.open("PUT", this.uploadUrl);
70 req.setRequestHeader("Content-Type", file.type);
71 req.setRequestHeader("X-File-Name", file.name);
72 addListener(reader, 'load',
73 function(evt){
74 try {
75 req.sendAsBinary(evt.target.result);
76 }
77 catch(e){}
78 });
79 reader.readAsBinaryString(file);
80 };
81
82 DDFileUploaderBase.prototype.uploadCompleteHandler = function(req) {
83 var slide = this.uploadedSlide;
84 this.uploadedSlide.removeChild(slide.label);
85 this.uploadedSlide.removeChild(slide.progressBar);
86 var fragment = getCopyOfNode(req.responseXML.documentElement.firstChild);
87 var img = fragment.getElementsByTagName('img')[0];
88 if (req.status === 200) {
89 // update
90 var existing = this.existingSlides[img.src];
91 if (existing) {
92 existing.src = existing.src + '?' + Math.random().toString();
93 }
94 slide.img.src = '';
95 slide.img.parentNode.removeChild(slide.img);
96 slide.img = undefined;
97 slide.parentNode.removeChild(slide);
98 }
99 else if(req.status === 201) {
100 // creation
101 img.onload = function(evt) {
102 // accelerate GC before replacing
103 slide.img.src = '';
104 slide.img.parentNode.removeChild(slide.img);
105 slide.img = undefined;
106 slide.parentNode.replaceChild(fragment, slide);
107 };
108 }
109 this.previewsLoaded--;
110 this.previewQueueLoadNext();
111 this.uploadQueueLoadNext();
112 };
113
114 DDFileUploaderBase.prototype.progressHandler = function(evt) {
115 if (evt.lengthComputable) {
116 var progress = evt.loaded / evt.total;
117 this.updateProgressBar(progress);
118 var currentOpacity = this.previewImg.style.opacity;
119 this.previewImg.style.opacity = Math.max(currentOpacity, progress);
120 }
121 };
122
123 // Methods about queue
124 DDFileUploaderBase.prototype.uploadQueuePush = function(item) {
125 this.uploadQueue.push(item);
126 if (!this._uploadQueueRunning) {
127 this.startUploadQueue();
128 }
129 };
130
131 DDFileUploaderBase.prototype.startUploadQueue = function() {
132 this._uploadQueueRunning = true;
133 this.uploadQueueLoadNext();
134 };
135
136 DDFileUploaderBase.prototype.uploadQueueLoadNext = function() {
137 var item = this.uploadQueue.shift();
138 if (item) {
139 this.upload(item);
140 }
141 else {
142 this._uploadQueueRunning = false;
143 }
144 };
145
146 }());