diff --git a/.gitignore b/.gitignore
index d5569000031fc0bcc6614683649555cc49eab5bc..f7a8c56490cb74a4f6340c2ec181d5ce65a54d2d 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 0000000000000000000000000000000000000000..c2fcc1b00f76791ec7df4ca18f4bd38b530072a1
--- /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 a1712f136df1ace1b1eb38a4dd985cd3d13b337a..d5d0d380b0ad7af90562e6c8a40f9fc10f702d39 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 833afd5f20e9c7558e1b4f18150006251dda8559..a2d8da6b1478d84c3e4833ebe39d2b6b03eb7ff0 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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391