|
1 window.AjaxUpload = function(formid) |
|
2 { |
|
3 load_component(['jquery', 'jquery-ui', 'l10n']); |
|
4 |
|
5 var theform = document.getElementById(formid); |
|
6 theform.AjaxUpload = this; |
|
7 this.form = theform; |
|
8 |
|
9 $(this.form).submit(function() |
|
10 { |
|
11 return this.AjaxUpload.presubmit(); |
|
12 }); |
|
13 }; |
|
14 |
|
15 window.zeropad = function(i, ndig) |
|
16 { |
|
17 var s = String(i); |
|
18 while ( s.length < ndig ) |
|
19 s = '0' + s; |
|
20 return s; |
|
21 } |
|
22 |
|
23 window.humanize_time = function(secs) |
|
24 { |
|
25 var seconds = secs % 60; |
|
26 var minutes = (secs - seconds) / 60; |
|
27 if ( minutes >= 60 ) |
|
28 { |
|
29 var hours = (minutes - (minutes % 60)) / 60; |
|
30 minutes = minutes % 60; |
|
31 return zeropad(hours, 2) + ':' + zeropad(minutes, 2) + ':' + zeropad(seconds, 2); |
|
32 } |
|
33 return zeropad(minutes, 2) + ':' + zeropad(seconds, 2); |
|
34 } |
|
35 |
|
36 AjaxUpload.prototype.cancelbit = false; |
|
37 |
|
38 AjaxUpload.prototype.status = function(state) |
|
39 { |
|
40 if ( state.done ) |
|
41 { |
|
42 $('div.wait-box', this.statusbox).text($lang.get('upload_msg_processing')); |
|
43 $('div.progress', this.statusbox).progressbar('value', 100); |
|
44 } |
|
45 else if ( state.cancel_upload ) |
|
46 { |
|
47 if ( window.stop ) |
|
48 window.stop(); |
|
49 else if ( document.execCommand ) |
|
50 document.execCommand('Stop'); |
|
51 $('div.wait-box', this.statusbox).addClass('error-box').removeClass('wait-box').text($lang.get('upload_msg_cancelled')); |
|
52 |
|
53 $('div.progress', this.statusbox).progressbar('value', 100).addClass('ui-progressbar-failure'); |
|
54 } |
|
55 else |
|
56 { |
|
57 var rawpct = state.bytes_processed / state.content_length; |
|
58 var pct = (Math.round((rawpct) * 1000)) / 10; |
|
59 var elapsed = state.current_time - state.start_time; |
|
60 var rawbps = state.bytes_processed / elapsed; |
|
61 var kbps = Math.round((rawbps) / 1024); |
|
62 var remain_bytes = state.content_length - state.bytes_processed; |
|
63 var remain_time = Math.round(remain_bytes / rawbps); |
|
64 if ( pct > 0 ) |
|
65 $('div.wait-box', this.statusbox).text($lang.get('upload_msg_uploading', { |
|
66 percent: pct, |
|
67 elapsed: humanize_time(elapsed), |
|
68 speed: kbps, |
|
69 remain: humanize_time(remain_time) |
|
70 })) |
|
71 .append('<br /><a href="#" class="cancel"></a>'); |
|
72 else |
|
73 $('div.wait-box', this.statusbox).text($lang.get('upload_msg_starting')) |
|
74 .append('<br /><a href="#" class="cancel"></a>'); |
|
75 |
|
76 var au = this; |
|
77 $('a.cancel', this.statusbox).text($lang.get('upload_btn_cancel')).click(function() |
|
78 { |
|
79 au.cancel(); |
|
80 return false; |
|
81 }); |
|
82 |
|
83 $('div.progress', this.statusbox).progressbar('value', pct); |
|
84 } |
|
85 }; |
|
86 |
|
87 AjaxUpload.prototype.cancel = function() |
|
88 { |
|
89 this.cancelbit = true; |
|
90 }; |
|
91 |
|
92 AjaxUpload.prototype.refresh_status = function(au) |
|
93 { |
|
94 try |
|
95 { |
|
96 var cancelbit = au.cancelbit ? '&cancel=true' : ''; |
|
97 au.cancelbit = false; |
|
98 ajaxGet(makeUrlNS('Special', 'AjaxUpload', 'form=' + au.form.id + '&uploadstatus=' + au.key + cancelbit), au._incoming_status); |
|
99 } |
|
100 catch (e) |
|
101 { |
|
102 alert(e); |
|
103 } |
|
104 }; |
|
105 |
|
106 AjaxUpload.prototype._incoming_status = function(ajax) |
|
107 { |
|
108 if ( ajax.readyState == 4 ) |
|
109 { |
|
110 var state = parseJSON(ajax.responseText); |
|
111 if ( state ) |
|
112 { |
|
113 var au = document.getElementById(state.form).AjaxUpload; |
|
114 au.status(state); |
|
115 |
|
116 if ( !state.done && !state.cancel_upload ) |
|
117 setTimeout(function() |
|
118 { |
|
119 au.refresh_status(au) |
|
120 }, 250); |
|
121 } |
|
122 } |
|
123 }; |
|
124 |
|
125 AjaxUpload.prototype.presubmit = function() |
|
126 { |
|
127 try |
|
128 { |
|
129 // create status container and target iframe |
|
130 this.statusbox = document.createElement('div'); |
|
131 this.iframe = document.createElement('iframe'); |
|
132 this.iframe.AjaxUpload = this; |
|
133 $(this.iframe) |
|
134 .attr('src', 'about:blank') |
|
135 .attr('width', '1') |
|
136 .attr('height', '1') |
|
137 .attr('frameborder', '0') |
|
138 .css('visibility', 'hidden') |
|
139 .attr('name', this.form.id + '_frame') |
|
140 .load(this._frame_onload); |
|
141 |
|
142 this.form.parentNode.insertBefore(this.statusbox, this.form); |
|
143 this.form.parentNode.insertBefore(this.iframe, this.form); |
|
144 this.form.target = this.form.id + '_frame'; |
|
145 |
|
146 this.upload_start(); |
|
147 |
|
148 var have_progress_support = this.form.progress_support.value == 'true'; |
|
149 if ( have_progress_support ) |
|
150 { |
|
151 this.key = this.form[this.form.upload_progress_name.value].value; |
|
152 this.refresh_status(this); |
|
153 } |
|
154 } |
|
155 catch ( e ) |
|
156 { |
|
157 console.debug(e); |
|
158 return false; |
|
159 } |
|
160 |
|
161 return true; |
|
162 }; |
|
163 |
|
164 AjaxUpload.prototype._frame_onload = function() |
|
165 { |
|
166 var childbody = window[this.AjaxUpload.form.id + '_frame'].document.getElementsByTagName('body')[0]; |
|
167 window[this.AjaxUpload.form.id + '_frame'].document.close(); |
|
168 this.AjaxUpload.upload_success(childbody); |
|
169 }; |
|
170 |
|
171 AjaxUpload.prototype.upload_start = function() |
|
172 { |
|
173 $(this.statusbox).html('<div class="wait-box">' + $lang.get('upload_msg_starting') + '</div><div class="progress" style="margin-top: 10px;"></div>'); |
|
174 $('div.progress', this.statusbox).progressbar({ value: 0 }); |
|
175 $(this.form).hide(); |
|
176 }; |
|
177 |
|
178 AjaxUpload.prototype.upload_success = function(childbody) |
|
179 { |
|
180 $(this.statusbox).html('<div class="info-box">Upload complete! Result from server:' + childbody.innerHTML + '</div>'); |
|
181 $('div.info-box', this.statusbox).append('<a href="#">Reset!</a>'); |
|
182 var form_id = this.form.id; |
|
183 $('div.info-box a', this.statusbox).click(function() |
|
184 { |
|
185 try |
|
186 { |
|
187 var au = document.getElementById(form_id).AjaxUpload; |
|
188 au.reset(); |
|
189 } |
|
190 catch(e) {}; |
|
191 return false; |
|
192 }); |
|
193 }; |
|
194 |
|
195 AjaxUpload.prototype.reset = function() |
|
196 { |
|
197 this.iframe.parentNode.removeChild(this.iframe); |
|
198 this.statusbox.parentNode.removeChild(this.statusbox); |
|
199 delete(window[this.form.id + '_frame']); |
|
200 $('form#' + this.form.id).show(); |
|
201 return false; |
|
202 }; |