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
136
137
138
139
140
141
|
$(function () {
// Add a flash message
var flash = function (category, message) {
$('#flashes').append($('<li>').addClass(category).text(message));
};
var scriptSrc = document.getElementById('receive-script').src;
var staticImgPath = scriptSrc.substr(0, scriptSrc.lastIndexOf('/') + 1).replace('js', 'img');
// Intercept submitting the form
$('#send').submit(function (event) {
event.preventDefault();
// Build the form data
var formData = new FormData();
// Files
var filenames = [];
var $fileSelect = $('#file-select');
if ($fileSelect.length > 0) {
var files = $fileSelect.get(0).files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
filenames.push(file.name);
formData.append('file[]', file, file.name);
}
}
// Text message
var $text = $('#text');
if ($text.length > 0) {
formData.append("text", $text.val())
}
// 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) {
$('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) {
$('.cancel', ajax.$upload_div).remove();
$('.upload-status', ajax.$upload_div).html('<img src="' + staticImgPath + '/ajax.gif" alt="" /> Waiting for data to finish traversing Tor network ...');
}
}, false);
ajax.addEventListener('load', function (event) {
// 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) {
flash('error', 'Invalid response from server: ' + data);
}
}, false);
ajax.addEventListener('error', function (event) {
flash('error', 'Error uploading: ' + filenames.join(', '));
// Remove the upload div
ajax.$upload_div.remove()
}, false);
ajax.addEventListener('abort', function (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', '/upload-ajax', true);
ajax.send(formData);
});
});
|
