Use dropzone and pydrop for file uploading

This commit is contained in:
Daniel Markstedt 2021-09-21 22:51:06 -07:00
parent e98930cfff
commit b09810b46b
4 changed files with 65 additions and 36 deletions

View File

@ -11,3 +11,4 @@ waitress==1.4.4
zope.event==4.5.0
zope.interface==5.1.2
protobuf==3.17.3
pydrop==0.0.6

View File

@ -21,6 +21,11 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/basic.min.css"/>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js">
</script>
<div class="content">
<div class="header">

View File

@ -172,30 +172,30 @@
<table style="border: none">
<tr style="border: none">
<td style="border: none; vertical-align:top;">
<form id="uploadForm" action="/files/upload/" onchange="fileSelect(event)" method="post" enctype="multipart/form-data">
<label for="file">File:</label>
<input type="file" name="file" accept="{{valid_file_suffix}}" />
<input type="submit" value="Upload" />
<form method="POST" action="/files/upload" class="dropzone dz-clickable" id="dropper" enctype="multipart/form-data">
</form>
</td>
</tr>
</table>
<p><small>Supported file types: {{valid_file_suffix}}</small></p>
<script>
function fileSelect(e) {
document.getElementById("uploadForm").setAttribute('action', "/files/upload/" + e.target.files[0].name)
console.log(e.target.files[0].name);
<script type="application/javascript">
Dropzone.options.dropper = {
paramName: 'file',
chunking: true,
forceChunking: true,
url: '/files/upload',
maxFilesize: 2049, // megabytes
chunkSize: 1000000 // bytes
}
</script>
</script>
<p><small>Recognized file types: {{valid_file_suffix}}</small></p>
<hr/>
<h2>Download File from Web</h2>
<p>Given a URL, download that file to the <tt>{{base_dir}}</tt></p>
<table style="border: none">
<tr style="border: none">
<td style="border: none; vertical-align:top;">
<tr style="border: none">
<td style="border: none; vertical-align:top;">
<form action="/files/download_image" method="post">
<label for="url">URL:</label>
<input type="text" placeholder="URL" name="url" />

View File

@ -1,3 +1,4 @@
import logging
from flask import (
Flask,
render_template,
@ -7,6 +8,7 @@ from flask import (
redirect,
send_file,
send_from_directory,
make_response,
)
from file_cmds import (
@ -46,6 +48,7 @@ from ractl_cmds import (
from settings import *
app = Flask(__name__)
log = logging.getLogger('pydrop')
@app.route("/")
@ -161,7 +164,7 @@ def drive_create():
size = request.form.get("size")
file_type = request.form.get("file_type")
file_name = request.form.get("file_name")
# Creating the image file
process = create_new_image(file_name, file_type, size)
if process["status"] == True:
@ -483,30 +486,50 @@ def download_img():
return redirect(url_for("index"))
@app.route("/files/upload/<filename>", methods=["POST"])
def upload_file(filename):
if not filename:
flash("No file provided.", "error")
return redirect(url_for("index"))
from os import path
@app.route("/files/upload", methods=["POST"])
def upload_file():
from werkzeug.utils import secure_filename
file_path = path.join(app.config["UPLOAD_FOLDER"], secure_filename(filename))
if path.isfile(file_path):
flash(f"{filename} already exists.", "error")
return redirect(url_for("index"))
from os import path
import pydrop
from io import DEFAULT_BUFFER_SIZE
binary_new_file = "bx"
with open(file_path, binary_new_file, buffering=DEFAULT_BUFFER_SIZE) as f:
chunk_size = DEFAULT_BUFFER_SIZE
while True:
chunk = request.stream.read(chunk_size)
if len(chunk) == 0:
break
f.write(chunk)
# TODO: display an informative success message
return redirect(url_for("index", filename=filename))
file = request.files['file']
save_path = path.join(app.config["UPLOAD_FOLDER"], secure_filename(file.filename))
current_chunk = int(request.form['dzchunkindex'])
# If the file already exists it's ok if we are appending to it,
# but not if it's new file that would overwrite the existing one
if path.exists(save_path) and current_chunk == 0:
# 400 and 500s will tell dropzone that an error occurred and show an error
return make_response(('File already exists', 400))
try:
with open(save_path, 'ab') as f:
f.seek(int(request.form['dzchunkbyteoffset']))
f.write(file.stream.read())
except OSError:
# log.exception will include the traceback so we can see what's wrong
log.exception('Could not write to file')
return make_response(("Not sure why,"
" but we couldn't write the file to disk", 500))
total_chunks = int(request.form['dztotalchunkcount'])
if current_chunk + 1 == total_chunks:
# This was the last chunk, the file should be complete and the size we expect
if path.getsize(save_path) != int(request.form['dztotalfilesize']):
log.error(f"File {file.filename} was completed, "
f"but has a size mismatch."
f"Was {path.getsize(save_path)} but we"
f" expected {request.form['dztotalfilesize']} ")
return make_response(('Size mismatch', 500))
else:
log.info(f'File {file.filename} has been uploaded successfully')
else:
log.debug(f'Chunk {current_chunk + 1} of {total_chunks} '
f'for file {file.filename} complete')
return make_response(("Chunk upload successful", 200))
@app.route("/files/create", methods=["POST"])