1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
$(function(){
// Add a flash message
var flash = function(category, message) {
$('#flashes').append($('<li>').addClass(category).text(message));
};
// Intercept submitting the form
$('#send').submit(function(event){
event.preventDefault();
// Create form data, and list of filenames
var files = $('#file-select').get(0).files;
var filenames = [];
var formData = new FormData();
for(var i = 0; i < files.length; i++) {
var file = files[i];
filenames.push(file.name);
formData.append('file[]', file, file.name);
}
// Reset the upload form
$('#send').get(0).reset();
// Don't use jQuery for ajax request, because the upload progress event doesn't
// have access to the the XMLHttpRequest object
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener('progress', function(event){
// Update progress bar for this specific upload
if(event.lengthComputable) {
console.log('upload progress', ''+event.loaded+' bytes / '+event.total+' bytes');
$('progress', ajax.$upload_div).attr({
value: event.loaded,
max: event.total,
});
}
// If it's finished sending all data to the first Tor node, remove cancel button
// and update the status
if(event.loaded == event.total) {
console.log('upload progress', 'complete');
$('.cancel', ajax.$upload_div).remove();
$('.upload-status', ajax.$upload_div).html('<img src="/static/img/ajax.gif" alt="" /> Waiting for data to finish traversing Tor network ...');
}
}, false);
ajax.addEventListener('load', function(event){
console.log('upload finished', ajax.response);
// Remove the upload div
ajax.$upload_div.remove();
// Parse response
try {
var response = JSON.parse(ajax.response);
// The 'new_body' response replaces the whole HTML document and ends
if('new_body' in response) {
$('body').html(response['new_body']);
return;
}
// Show error flashes
if('error_flashes' in response) {
for(var i=0; i<response['error_flashes'].length; i++) {
flash('error', response['error_flashes'][i]);
}
}
// Show info flashes
if('info_flashes' in response) {
for(var i=0; i<response['info_flashes'].length; i++) {
flash('info', response['info_flashes'][i]);
}
}
} catch(e) {
console.log('invalid response');
flash('error', 'Invalid response from server: '+data);
}
}, false);
ajax.addEventListener('error', function(event){
console.log('error', event);
flash('error', 'Error uploading: '+filenames.join(', '));
// Remove the upload div
ajax.$upload_div.remove()
}, false);
ajax.addEventListener('abort', function(event){
console.log('abort', event);
flash('error', 'Upload aborted: '+filenames.join(', '));
}, false);
// Make the upload div
/* The DOM for an upload looks something like this:
<div class="upload">
<div class="upload-meta">
<input class="cancel" type="button" value="Cancel" />
<div class="upload-filename">educational-video.mp4, secret-plans.pdf</div>
<div class="upload-status">Sending to first Tor node ...</div>
</div>
<progress value="25" max="100"></progress>
</div> */
var $progress = $('<progress>').attr({ value: '0', max: 100 });
var $cancel_button = $('<input>').addClass('cancel').attr({ type: 'button', value: 'Cancel' });
var $upload_filename = $('<div>').addClass('upload-filename').text(filenames.join(', '));
var $upload_status = $('<div>').addClass('upload-status').text('Sending data to initial Tor node ...');
var $upload_div = $('<div>')
.addClass('upload')
.append(
$('<div>').addClass('upload-meta')
.append($cancel_button)
.append($upload_filename)
.append($upload_status)
)
.append($progress);
$cancel_button.click(function(){
// Abort the upload, and remove the upload div
ajax.abort();
$upload_div.remove()
});
ajax.$upload_div = $upload_div;
$('#uploads').append($upload_div);
// Send the request
ajax.open('POST', window.location.pathname + '/upload-ajax', true);
ajax.send(formData);
console.log('upload started');
});
});
|