diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..95c87db --- /dev/null +++ b/.gitignore @@ -0,0 +1,139 @@ +# Byte-compiled / optimized / DLL files +__pycache__/ +*.py[cod] +*$py.class + +# C extensions +*.so + +# Distribution / packaging +.Python +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +share/python-wheels/ +*.egg-info/ +.installed.cfg +*.egg +MANIFEST + +# PyInstaller +# Usually these files are written by a python script from a template +# before PyInstaller builds the exe, so as to inject date/other infos into it. +*.manifest +*.spec + +# Installer logs +pip-log.txt +pip-delete-this-directory.txt + +# Unit test / coverage reports +htmlcov/ +.tox/ +.nox/ +.coverage +.coverage.* +.cache +nosetests.xml +coverage.xml +*.cover +*.py,cover +.hypothesis/ +.pytest_cache/ +cover/ + +# Translations +*.mo +*.pot + +# Django stuff: +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + +# Flask stuff: +instance/ +.webassets-cache + +# Scrapy stuff: +.scrapy + +# Sphinx documentation +docs/_build/ + +# PyBuilder +.pybuilder/ +target/ + +# Jupyter Notebook +.ipynb_checkpoints + +# IPython +profile_default/ +ipython_config.py + +# pyenv +# For a library or package, you might want to ignore these files since the code is +# intended to run in multiple environments; otherwise, check them in: +# .python-version + +# pipenv +# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. +# However, in case of collaboration, if having platform-specific dependencies or dependencies +# having no cross-platform support, pipenv may install dependencies that don't work, or not +# install all needed dependencies. +#Pipfile.lock + +# PEP 582; used by e.g. github.com/David-OConnor/pyflow +__pypackages__/ + +# Celery stuff +celerybeat-schedule +celerybeat.pid + +# SageMath parsed files +*.sage.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +# Rope project settings +.ropeproject + +# mkdocs documentation +/site + +# mypy +.mypy_cache/ +.dmypy.json +dmypy.json + +# Pyre type checker +.pyre/ + +# pytype static type analyzer +.pytype/ + +# Cython debug symbols +cython_debug/ +config.py diff --git a/app.py b/app.py index 256aebf..95b13e9 100644 --- a/app.py +++ b/app.py @@ -81,7 +81,7 @@ def test(): return render_template('error.html', error=error) content = base64.b64decode(jresp['content']).decode('UTF-8') sha = jresp['sha'] - return render_template('test.html',content=content,sha=sha,path=path) + return render_template('test.html',filecontent=content,sha=sha,path=path) @app.route('/update', methods=['POST']) def update(): diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..49a429c --- /dev/null +++ b/static/style.css @@ -0,0 +1,40 @@ +#drop-area { + border: 2px dashed #ccc; + border-radius: 20px; + width: 480px; + font-family: sans-serif; + margin: 100px auto; + padding: 20px; + } + #drop-area.highlight { + border-color: purple; + } + p { + margin-top: 0; + } + .my-form { + margin-bottom: 10px; + } + #gallery { + margin-top: 10px; + } + #gallery img { + width: 150px; + margin-bottom: 10px; + margin-right: 10px; + vertical-align: middle; + } + .button { + display: inline-block; + padding: 10px; + background: #ccc; + cursor: pointer; + border-radius: 5px; + border: 1px solid #ccc; + } + .button:hover { + background: #ddd; + } + #fileElem { + display: none; + } diff --git a/static/upload.js b/static/upload.js new file mode 100644 index 0000000..79fdca4 --- /dev/null +++ b/static/upload.js @@ -0,0 +1,85 @@ +let dropArea = document.getElementById('drop-area'); +let filesDone = 0 +let filesToDo = 0 +let progressBar = document.getElementById('progress-bar') + +;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { + dropArea.addEventListener(eventName, preventDefaults, false) + }) + + function preventDefaults (e) { + e.preventDefault() + e.stopPropagation() + } + + ;['dragenter', 'dragover'].forEach(eventName => { + dropArea.addEventListener(eventName, highlight, false) + }) + + ;['dragleave', 'drop'].forEach(eventName => { + dropArea.addEventListener(eventName, unhighlight, false) + }) + + function highlight(e) { + dropArea.classList.add('highlight') + } + + function unhighlight(e) { + dropArea.classList.remove('highlight') + } + + dropArea.addEventListener('drop', handleDrop, false) + +function handleDrop(e) { + let dt = e.dataTransfer + let files = dt.files + + handleFiles(files) +} + +function handleFiles(files) { + files = [...files] + initializeProgress(files.length) + files.forEach(uploadFile) + files.forEach(previewFile) + } + function uploadFile(file) { + let url = 'YOUR URL HERE' + let formData = new FormData() + + formData.append('file', file) + + fetch(url, { + method: 'POST', + body: formData + }) + .then(progressDone) // <- Add `progressDone` call here + .catch(() => { /* Error. Inform the user */ }) + } + + function previewFile(file) { + let reader = new FileReader() + reader.readAsDataURL(file) + reader.onloadend = function() { + let fig = document.createElement('figure') + fig.id = file.name + document.getElementById('gallery').appendChild(fig) + let img = document.createElement('img') + img.src = reader.result + document.getElementById(file.name).appendChild(img) + let caption = document.createElement('figcaption') + caption.textContent = file.name + document.getElementById(file.name).appendChild(caption) + } + } + + function initializeProgress(numfiles) { + progressBar.value = 0 + filesDone = 0 + filesToDo = numfiles + } + + function progressDone() { + filesDone++ + progressBar.value = filesDone / filesToDo * 100 + } diff --git a/templates/home.html b/templates/home.html index 3ae319f..f6cf89e 100644 --- a/templates/home.html +++ b/templates/home.html @@ -1,8 +1,5 @@ - - - +{% extends "layout.html" %} +{% block content %} {% if user %}
Logged in as @@ -14,7 +11,4 @@ {% else %} login {% endif %} - - - - +{% endblock %} diff --git a/templates/layout.html b/templates/layout.html new file mode 100644 index 0000000..fd6d6bd --- /dev/null +++ b/templates/layout.html @@ -0,0 +1,23 @@ + + + + {% block head %} + + + + + + + + {% block title %}{% endblock %} + {% endblock %} + + +
{% block content %}{% endblock %}
+ + + diff --git a/templates/test.html b/templates/test.html index 54d3ffa..471d466 100644 --- a/templates/test.html +++ b/templates/test.html @@ -1,13 +1,31 @@ - -
-
- - - -
+{% extends "layout.html" %} +{% block content %} +
+
+
+
+
+ + + +
+
+
+
+
+

Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region

+ + +
+ + +
+
+
+
+ +{% endblock %}