Add: upload via tus

.gitignore

@@ -1,3 +1,5 @@
 __pycache__/
 *.pyc
 /.env
+/node_modules
+/package-lock.json

README.md

@@ -12,6 +12,7 @@ This front-end is written in Python 3.7 with Flask.
 To start it, you are advised to first create a virtualenv:
 
 ```bash
+npm install
 python3 -m venv .env
 .env/bin/pip install -r requirements.txt
 ```

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "bananas3",
+  "version": "1.0.0",
+  "description": "bananas-frontend-web",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OpenTTD/bananas-frontend-web.git"
+  },
+  "author": "",
+  "license": "GPL-2.0",
+  "bugs": {
+    "url": "https://github.com/OpenTTD/bananas-frontend-web/issues"
+  },
+  "homepage": "https://github.com/OpenTTD/bananas-frontend-web#readme",
+  "dependencies": {
+    "tus-js-client": "^1.8.0"
+  }
+}

webclient/pages/version_info.py

@@ -296,5 +296,8 @@ def manager_new_package_upload(session, token):
         accept_tos=accept_tos,
         deps_editable=deps_editable,
         messages=messages,
+        tus_url="https://localhost:8088",
+        api_token=session.api_token,
+        upload_token=token,
         csrf_token=csrf_token,
     )

webclient/static/tus.min.js

@@ -0,0 +1 @@
+../../node_modules/tus-js-client/dist/tus.min.js

webclient/static/uploader.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var more_files = document.querySelector("li[id='more_files']");
+var input = document.querySelector("input[id='start_upload']");
+input.addEventListener("change", add_upload);
+
+var upload_file = null
+var upload_token = null
+var upload_instance = null
+
+function add_upload() {
+    if (input.value == "") return;
+    var i;
+    for (i = 0; i < input.files.length; i++) {
+        var file = input.files[i];
+        if (filelist.find(item => item[0] == file.name)) return;
+        filelist.push([file.name, file, null, false]);
+        var new_li = document.createElement("li");
+        new_li.id = "upload_" + file;
+        new_li.appendChild(document.createTextNode(file));
+        more_files.parentNode.insertBefore(new_li, more_files);
+    }
+    input.value = "";
+    if (upload_instance == null) start_next_upload();
+}
+
+function start_next_upload() {
+    var i;
+    for (i = 0; i < filelist.length; i++) {
+        if (!filelist[i][3]) {
+            upload_file = filelist[i][1];
+            break;
+        }
+    }
+
+    if (upload_file == null) return;
+
+    var options = {
+        endpoint: tus_url,
+        retryDelays: [0, 1000, 3000, 5000],
+        metadata: {
+            filename: upload_file.name,
+            filetype: upload_file.type
+        },
+        onError : function(error) {
+            update_status(upload_file.name, "Failed: " + error);
+            upload_file = null;
+            upload_token = null;
+            upload_instance = null;
+        },
+        onProgress: function(bytesUploaded, bytesTotal) {
+            var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
+            update_status(upload_file.name, "Uploading: " + percentage + " %");
+        },
+        onSuccess: function() {
+            update_status(upload_file.name, "Done");
+            var item = filelist.find(item => item[0] == upload_file.name);
+            if (item != null) item[3] = true;
+            upload_file = null;
+            upload_token = null;
+            upload_instance = null;
+            start_next_upload();
+        }
+    };
+
+    upload_instance = new tus.Upload(upload_file, options);
+    upload.start();
+}

webclient/templates/manager_new_package.html

@@ -18,7 +18,7 @@ <h3>Step 1: Terms of service</h3>
 <h3>Step 2: Upload files</h3>
 <ul>
 {% for file in version["files"] %}
-    <li>
+    <li id="upload_{{ file["filename"] }}">
         {{ file["filename"] }} ({{ (file["filesize"] | int) // 1024 }} kB)
         <button type="submit" name="delete_{{ file["uuid"] }}">Delete file</button>
         <ul>
@@ -28,6 +28,9 @@ <h3>Step 2: Upload files</h3>
         </ul>
     </li>
 {% endfor %}
+    <li id="more_files">
+        <input type="file" multiple id="start_upload"/>
+    </li>
 </ul>
 
 <h3>Step 3: Complete the description</h3>
@@ -133,4 +136,17 @@ <h3>Step 4: Validate and publish</h3>
 
 </form>
 
+<script type="text/javascript">
+var tus_url = "{{ tus_url }}";
+var api_token = "{{ api_token }}";
+var upload_token = "{{ upload_token }}";
+var filelist = [
+{% for file in version["files"] %}
+[ {{ file["filename"] }}, null, {{ file["uuid"] }}, true ],
+{% endfor %}
+];
+</script>
+<script src="/static/tus.min.js"></script>
+<script src="/static/uploader.js"></script>
+
 {% endblock %}