From e1044ad100fbc487f7f4167df8b5669a7761e610 Mon Sep 17 00:00:00 2001
From: "steven.liatti" <steven.liatti@hesge.ch>
Date: Fri, 1 Nov 2019 17:16:45 +0100
Subject: [PATCH] Add loader in template and some refactoring and amelioration
---
.gitignore | 3 ++-
README.md | 3 +++
src/server.py | 4 +++
src/templates/index.html | 56 ++++++++++++++++++++++++++++++++++------
uploads/.gitkeep | 0
5 files changed, 57 insertions(+), 9 deletions(-)
create mode 100644 README.md
create mode 100644 uploads/.gitkeep
diff --git a/.gitignore b/.gitignore
index d556900..f7a8c56 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
*__pycache__*
-uploads/*
\ No newline at end of file
+uploads/*
+!uploads/.gitkeep
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c2fcc1b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+# Simple Uploader
+
+Very simple file uploader using python Flask.
\ No newline at end of file
diff --git a/src/server.py b/src/server.py
index a1712f1..d5d0d38 100644
--- a/src/server.py
+++ b/src/server.py
@@ -1,4 +1,5 @@
import os
+import time
from flask import Flask, render_template, request
from werkzeug import secure_filename
@@ -11,6 +12,9 @@ def upload_file():
if request.method == 'POST':
f = request.files['file']
f.save(os.path.join(app.config['UPLOAD_FOLDER'], secure_filename(f.filename)))
+
+ # Simulate long process
+ time.sleep(5)
return 'file uploaded successfully'
else:
return render_template('index.html')
diff --git a/src/templates/index.html b/src/templates/index.html
index 833afd5..a2d8da6 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -1,9 +1,49 @@
-<html>
- <body>
- <form action = "/" method = "POST"
- enctype = "multipart/form-data">
- <input type = "file" name = "file" />
- <input type = "submit"/>
- </form>
- </body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Uploader</title>
+ <link
+ href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+ rel="stylesheet"
+ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+ crossorigin="anonymous" >
+ <style>
+ .loader {
+ border: 16px solid #f3f3f3; /* Light grey */
+ border-top: 16px solid #3498db; /* Blue */
+ border-radius: 50%;
+ width: 120px;
+ height: 120px;
+ animation: spin 2s linear infinite;
+ }
+
+ @keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+ </style>
+</head>
+<body>
+ <div id="container" class="container">
+ <h1>Simple Uploader</h1>
+ <form action="/" method="POST"
+ enctype="multipart/form-data">
+ <input type="file" name="file" />
+ <input type="submit" onclick="load();"/>
+ </form>
+ </div>
+
+ <script>
+ function load() {
+ let loader = document.createElement("div");
+ loader.className = "loader";
+
+ let content = document.getElementById("container");
+ content.appendChild(loader);
+ }
+ </script>
+</body>
</html>
\ No newline at end of file
diff --git a/uploads/.gitkeep b/uploads/.gitkeep
new file mode 100644
index 0000000..e69de29
--
GitLab