diff options
author | Micah Lee <micah@micahflee.com> | 2019-02-15 14:52:00 -0800 |
---|---|---|
committer | Micah Lee <micah@micahflee.com> | 2019-02-15 14:52:00 -0800 |
commit | e2c4ec1f6ff0ba39cfc21eed67a99bbf46a20b90 (patch) | |
tree | b3830c1fb427f9dfc93e93354c78c7203607f1ed /share | |
parent | a22d21c222d3d5d5ff958c12ac3cd4d55207bf2a (diff) | |
download | onionshare-e2c4ec1f6ff0ba39cfc21eed67a99bbf46a20b90.tar.gz onionshare-e2c4ec1f6ff0ba39cfc21eed67a99bbf46a20b90.zip |
Make uploading over ajax, and ajax flash messages, work
Diffstat (limited to 'share')
-rw-r--r-- | share/static/css/style.css | 18 | ||||
-rw-r--r-- | share/static/js/receive.js | 51 | ||||
-rw-r--r-- | share/templates/receive.html | 27 |
3 files changed, 63 insertions, 33 deletions
diff --git a/share/static/css/style.css b/share/static/css/style.css index daaa9ce4..73d3e6f9 100644 --- a/share/static/css/style.css +++ b/share/static/css/style.css @@ -139,30 +139,22 @@ ul.flashes { } ul.flashes li { - margin: 0; + margin: 0 0 5px 0; padding: 10px; + list-style: none; + border: 0; + border-radius: 3px; + text-align: left; } li.error { - list-style: none; - margin: 0; - padding: 0; color: #ffffff; background-color: #c90c0c; - border: 0; - border-radius: 5px; - text-align: left; } li.info { - list-style: none; - margin: 0; - padding: 0; color: #000000; background-color: #a9e26c; - border: 0; - border-radius: 5px; - text-align: left; } .closed-wrapper { diff --git a/share/static/js/receive.js b/share/static/js/receive.js index 746b860e..45cbc9dc 100644 --- a/share/static/js/receive.js +++ b/share/static/js/receive.js @@ -4,6 +4,15 @@ document.getElementById('noscript').style.display = 'none'; var form = document.getElementById('send'); var fileSelect = document.getElementById('file-select'); var uploadButton = document.getElementById('send-button'); +var flashes = document.getElementById('flashes'); + +// Add a flash message +function flash(category, message) { + var el = document.createElement('li'); + el.innerText = message; + el.className = category; + flashes.appendChild(el); +} form.onsubmit = function(event) { event.preventDefault(); @@ -30,9 +39,37 @@ form.onsubmit = function(event) { uploadButton.innerHTML = 'Uploading '+percent+'%'; }, false); - ajax.addEventListener("load", function(event){ - console.log("upload finished"); + ajax.addEventListener('load', function(event){ + console.log('upload finished', ajax.response); if(ajax.status == 200) { + // 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) { + document.body.innerHTML = 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', ajax.response); + flash('error', 'Invalid response from server: '+ajax.response); + } + // Re-enable button, and update text uploadButton.innerHTML = 'Send Files'; uploadButton.disabled = false; @@ -40,16 +77,18 @@ form.onsubmit = function(event) { } }, false); - ajax.addEventListener("error", function(event){ + ajax.addEventListener('error', function(event){ console.log('error', event); + flash('error', 'Error uploading'); }, false); - ajax.addEventListener("abort", function(event){ + ajax.addEventListener('abort', function(event){ console.log('abort', event); + flash('error', 'Upload aborted'); }, false); // Send the request - ajax.open('POST', window.location.pathname + '/upload', true); + ajax.open('POST', window.location.pathname + '/upload-ajax', true); ajax.send(formData); - console.log("upload started"); + console.log('upload started'); } diff --git a/share/templates/receive.html b/share/templates/receive.html index 9f8201c7..65aeff7a 100644 --- a/share/templates/receive.html +++ b/share/templates/receive.html @@ -21,23 +21,21 @@ <p><input type="file" id="file-select" name="file[]" multiple /></p> <p><button type="submit" id="send-button" class="button">Send Files</button></p> <div> - {% with messages = get_flashed_messages(with_categories=true) %} - {% if messages %} - <ul class=flashes> - {% for category, message in messages %} - <li class="{{ category }}">{{ message }}</li> - {% endfor %} - </ul> - {% endif %} - {% endwith %} + <ul id="flashes" class="flashes"> + {% with messages = get_flashed_messages(with_categories=true) %} + {% if messages %} + {% for category, message in messages %} + <li class="{{ category }}">{{ message }}</li> + {% endfor %} + {% endif %} + {% endwith %} + </ul> </div> </form> - <!-- We are not using a <noscript> tag because it only works when the security slider - is set to Safest, not Safer. - - For more information about the upload issue: - https://github.com/micahflee/onionshare/issues/899 + <!-- + We are not using a <noscript> tag because it only works when the security slider is set to + Safest, not Safer: https://trac.torproject.org/projects/tor/ticket/29506 --> <div id="noscript"> <p> @@ -47,6 +45,7 @@ to Standard or <a target="_blank" href="/noscript-xss-instructions">turn off your Tor Browser's NoScript XSS setting</a>.</p> </div> + </div> </div> <script src="/static/js/receive.js"></script> |