upload: show progress bar

PX4 · Feb 28, 2024 · 45d981b · 45d981b
1 parent 9dd5dc7
commit 45d981b
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 4 deletions.
diff --git a/app/plot_app/static/js/upload.js b/app/plot_app/static/js/upload.js
@@ -75,5 +75,50 @@ $(function() { // on startup
 	restoreSetting('email');
 	restoreSetting('access');
 	updateAccess();
+
+    // Ajax file upload with progress updates
+    $("#upload-form").on('submit', function (e) {
+        e.preventDefault();
+        var form_data = new FormData(this);
+        var progress_bar = $('.progress');
+        progress_bar.show();
+        var upload_button = $('#upload-button');
+        upload_button.hide();
+
+        $.ajax({
+            xhr: function () {
+                var xhr = new window.XMLHttpRequest();
+                xhr.upload.addEventListener("progress", function (evt) {
+                    if (evt.lengthComputable) {
+                        var percent_complete = (evt.loaded / evt.total) * 99; // max to 99, as the redirect will take time too
+                        progress_bar.find('.progress-bar').width(percent_complete + '%');
+                        progress_bar.find('.progress-bar').html(percent_complete.toFixed(0) + '%');
+                    }
+                }, false);
+                return xhr;
+            },
+            type: 'POST',
+            url: '/upload',
+            data: form_data,
+            cache: false,
+            contentType: false,
+            processData: false,
+            success: function (data) {
+                // Handle the response from the server
+                console.log(data);
+                var json_response = JSON.parse(data);
+                window.location.href = json_response.url
+            },
+            error: function (data, textStatus) {
+                // Handle errors, if any
+                console.error('Error uploading file.');
+                console.error(textStatus);
+                var progress_bar = $('.progress');
+                progress_bar.hide();
+                var upload_failure = $('#upload-failure');
+                upload_failure.show();
+            }
+        });
+    });
 });
 
diff --git a/app/plot_app/templates/upload.html b/app/plot_app/templates/upload.html
@@ -11,7 +11,7 @@ <h3>Upload a Log File</h3>
 
 
 <table class="spaced">
-	<form enctype="multipart/form-data" action="/upload" method="post">
+	<form enctype="multipart/form-data" id="upload-form">
 		<tr>
 			<td width="30%" class="left">Description <small>(optional)</small>:</td>
 			<td width="70%">
@@ -102,6 +102,9 @@ <h3>Upload a Log File</h3>
 				<!-- automatically set depending on the "access" value -->
 				<input type="hidden" class="custom-control-input" name="public"
 					   id="public" value="false">
+				<!-- instruct server not to redirect, but return the URL instead -->
+				<input type="hidden" class="custom-control-input" name="redirect"
+					   id="redirect" value="false">
 			</td>
 		</tr>
 		<tr>
@@ -121,6 +124,16 @@ <h3>Upload a Log File</h3>
 			<td></td><td><br/><input class="btn btn-primary align-right"
 				 id="upload-button" type="submit" value="Upload" onclick="return validateForm();" /></td>
 		</tr>
+		<tr>
+			<td colspan="2">
+				<div class="progress mt-3" style="height: 20px; display: none;">
+					<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+				</div>
+				<div id="upload-failure" class="align-right" style="display: none;">
+					<b>File upload failed.</b>
+				</div>
+			</td>
+		</tr>
 	</form>
 </table>
 

diff --git a/app/tornado_handlers/upload.py b/app/tornado_handlers/upload.py
@@ -4,6 +4,7 @@
 
 from __future__ import print_function
 import datetime
+import json
 import os
 from html import escape
 import sys
@@ -115,7 +116,7 @@ def post(self, *args, **kwargs):
                     ['description', 'email',
                      'allowForAnalysis', 'obfuscated', 'source', 'type',
                      'feedback', 'windSpeed', 'rating', 'videoUrl', 'public',
-                     'vehicleName'])
+                     'vehicleName', 'redirect'])
                 description = escape(form_data['description'].decode("utf-8"))
                 email = form_data['email'].decode("utf-8")
                 upload_type = 'personal'
@@ -136,6 +137,9 @@ def post(self, *args, **kwargs):
                 feedback = ''
                 if 'feedback' in form_data:
                     feedback = escape(form_data['feedback'].decode("utf-8"))
+                should_redirect = source != 'QGroundControl'
+                if 'redirect' in form_data:
+                    should_redirect = form_data['redirect'].decode("utf-8") == 'true'
                 wind_speed = -1
                 rating = ''
                 stored_email = ''
@@ -291,9 +295,11 @@ def post(self, *args, **kwargs):
                 # send notification emails
                 send_notification_email(email, full_plot_url, delete_url, info)
 
-                # do not redirect for QGC
-                if source != 'QGroundControl':
+                if should_redirect:
                     self.redirect(url)
+                else:
+                    # Return plot url as json
+                    self.write(json.dumps({"url": url}))
 
             except CustomHTTPError:
                 raise