Skip to content
Snippets Groups Projects
Commit e1044ad1 authored by steven.liatti's avatar steven.liatti
Browse files

Add loader in template and some refactoring and amelioration

parent e4cac013
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
.gitignore
+ 2
− 1
View file @ e1044ad1
*__pycache__*
uploads/*
!uploads/.gitkeep
\ No newline at end of file
README.md 0 → 100644
+ 3
− 0
View file @ e1044ad1
# Simple Uploader
Very simple file uploader using python Flask.
\ No newline at end of file
src/server.py
+ 4
− 0
View file @ e1044ad1
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')
......
src/templates/index.html
+ 48
− 8
View file @ e1044ad1
<html>
<!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"/>
<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
uploads/.gitkeep 0 → 100644
+ 0
− 0
View file @ e1044ad1
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment