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
|
$(function(){
// Add a flash message
var flash = function(category, message) {
$('#flashes').append($('<li>').addClass(category).text(message));
};
// Add an upload
var new_upload_div = function(xhr, filenames) {
/*
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
xhr.abort();
$upload_div.remove()
});
return $upload_div;
};
// 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();
// Start upload
xhr = $.ajax({
method: 'POST',
url: window.location.pathname + '/upload-ajax',
data: formData,
// Tell jQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload) {
xhr.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', this.$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', this.$upload_div).remove();
$('.upload-status', this.$upload_div).html('<img src="/static/img/ajax.gif" alt="" /> Waiting for data to finish traversing Tor network ...');
}
}, false);
}
return xhr;
},
success: function(data, textStatus, xhr){
console.log('upload finished', data);
// Remove the upload div
xhr.$upload_div.remove();
// Parse response
try {
var response = JSON.parse(data);
// 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);
}
},
error: function(xhr, textStatus, errorThrown){
console.log('error', errorThrown);
flash('error', 'Error uploading: ' + errorThrown);
}
});
console.log('upload started', filenames);
// Make the upload div
xhr.$upload_div = new_upload_div(xhr, filenames);
$('#uploads').append(xhr.$upload_div);
});
});
|
