Skip to content

Instantly share code, notes, and snippets.

@code-boxx
Last active October 4, 2023 07:49
Show Gist options
  • Save code-boxx/0c2536fc8252d374e31219de9f50c440 to your computer and use it in GitHub Desktop.
Save code-boxx/0c2536fc8252d374e31219de9f50c440 to your computer and use it in GitHub Desktop.
Python Flask Resumable Upload

PYTHON FLASK RESUMABLE UPLOAD

https://code-boxx.com/python-flask-resumable-upload/

NOTES

  1. Run unpack.bat (Windows) unpack.sh (Linux/Mac). This will automatically:
    • Create 4 folders - static, temp, templates, upload
    • Move S2_upload.css and S2_upload.js into static.
    • Move S2_upload.html into templates.
    • Create a virtual environment - virtualenv venv
    • Activate the virtual environment - venv\scripts\activate (Windows) venv/bin/activate (Mac/Linux)
    • Install Flask pip install flask
    • Start the server python S1_server.py
  2. Access http://localhost in your browser.

LICENSE

Copyright by Code Boxx

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

# (A) INIT
# (A1) LOAD MODULES
from flask import Flask, render_template, request
import os
# (A2) FLASK SETTINGS
app = Flask(__name__)
HOST_NAME = "localhost"
HOST_PORT = 80
# app.debug = True
# (A3) UPLOAD FOLDERS & FLAGS
UPLOAD_TEMP = os.path.dirname(os.path.realpath(__file__)) + "/temp"
UPLOAD_TO = os.path.dirname(os.path.realpath(__file__)) + "/upload"
UPLOAD_LOCK = {}
# (A4) CREATE UPLOAD FOLDERS IF NOT EXIST
if not os.path.isdir(UPLOAD_TEMP):
os.mkdir(temp_dir, 0o777)
if not os.path.isdir(UPLOAD_TO):
os.mkdir(temp_dir, 0o777)
# (A5) SUPPORT FUNCTION - GET RESUMABLE CHUNK DATA
def chunker(r):
return {
"chunkNumber": int(r.get("resumableChunkNumber")),
"chunkSize": r.get("resumableChunkSize"),
"totalChunks": int(r.get("resumableTotalChunks")),
"identifier": r.get("resumableIdentifier"),
"path": r.get("resumableRelativePath"),
"fileName": r.get("resumableFilename"),
"fileSize": r.get("resumableTotalSize"),
"tempPath": os.path.join(UPLOAD_TEMP, r.get("resumableIdentifier")),
"tempChunk": os.path.join(UPLOAD_TEMP, r.get("resumableIdentifier"), r.get("resumableChunkNumber") + ".part")
}
# (B) HTML UPLOAD PAGE
@app.route("/")
def index():
return render_template("S2_upload.html")
# (C) CHECK FILE/CHUNK
@app.route("/uploads", methods=["GET"])
def checker():
# (C1) GET CURRENT CHUNK INFORMATION
current = chunker(request.args)
# (C2) RESPOND 200 IF CHUNK UPLOADED, 404 IF NOT
if os.path.isfile(current["tempChunk"]):
return ("", 200)
else:
return ("", 404)
# (D) HANDLE FILE CHUNK UPLOAD
@app.route("/uploads", methods=["POST"])
def uploader():
# (D1) GET CURRENT CHUNK INFORMATION
current = chunker(request.args)
# (D2) CREATE TEMP FOLDER IF NOT ALREADY CREATED
if not os.path.isdir(current["tempPath"]):
os.mkdir(current["tempPath"], 0o777)
# (D3) SAVE CHUNK
request.files["file"].save(current["tempChunk"])
# (D4) ALL CHUNKS UPLOADED?
complete = True
for i in range(1, current["totalChunks"] + 1):
if not os.path.exists(os.path.join(current["tempPath"], str(i) + ".part")):
complete = False
break
# (D5) ON COMPLETION OF ALL CHUNKS
if complete and not current["identifier"] in UPLOAD_LOCK :
# (D5-1) LOCK
UPLOAD_LOCK[current["identifier"]] = 1
# (D5-2) LET OUR POWERS COMBINE!
with open(os.path.join(UPLOAD_TO, current["fileName"]), "ab") as fullfile:
for i in range(1, current["totalChunks"] + 1):
chunkName = os.path.join(current["tempPath"], str(i) + ".part")
chunkFile = open(chunkName, "rb")
fullfile.write(chunkFile.read())
chunkFile.close()
os.unlink(chunkName)
fullfile.close()
os.rmdir(current["tempPath"])
# (D5-3) UNLOCK
del UPLOAD_LOCK[current["identifier"]]
# (D6) RESPONSE
return ("", 200)
# (E) START!
if __name__ == "__main__":
app.run(HOST_NAME, HOST_PORT)
/* (A) ENTIRE PAGE */
* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
body {
max-width: 500px;
padding: 10px;
margin: 0 auto;
}
/* (B) DROP ZONE */
#updrop {
font-weight: 700;
text-align: center;
color: #323232;
border: 2px dashed #d9d9d9;
border-radius: 10px;
background: #f7f7f7;
padding: 30px 0;
}
/* (C) FILE LIST */
#uplist {
margin-top: 10px;
}
#uplist .row {
padding: 15px;
background: #ededed;
}
#uplist .row:nth-child(even) {
background: #f7f7f7;
}
<!DOCTYPE html>
<html>
<head>
<title>Resumable Upload</title>
<link rel="stylesheet" href="static/S2_upload.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"></script>
<script defer src="static/S2_upload.js"></script>
</head>
<body>
<!-- (A) UPLOAD BUTTON & LIST -->
<div id="updrop">
Drop Files Here. Click To Resume/Pause.
</div>
<!-- (B) UPLOAD FILES LIST -->
<div id="uplist"></div>
</body>
</html>
window.addEventListener("load", () => {
// (A) CREATE RESUMABLE OBJECT
let r = new Resumable({
target: "/uploads",
query: { key: "value" } // optional
});
// (B) GET HTML ELEMENTS
let dropzone = document.getElementById("updrop"),
listzone = document.getElementById("uplist");
// (C) UPLOAD MECHANICS
// (C1) PAUSE/RESUME UPLOAD
dropzone.onclick = () => {
if (r.isUploading()) { r.pause(); }
else { r.upload(); }
};
// (C2) FILE ADDED - ADD HTML ROW & START UPLOAD
r.on("fileAdded", (file, evt) => {
let row = document.createElement("div");
row.className = "row";
row.innerHTML = `${file.fileName} (<span class="status">0%</span>)`;
row.id = file.uniqueIdentifier;
listzone.appendChild(row);
r.upload();
});
// (C3) UPLOAD PROGRESS
r.on("fileProgress", (file, evt) => {
let row = document.getElementById(file.uniqueIdentifier);
row.getElementsByTagName("span")[0].innerHTML = Math.ceil(file.progress() * 100) + "%";
});
// (C4) UPLOAD SUCCESFUL
r.on("fileSuccess", (file, msg) => {
// DO SOMETHING
});
// (C5) UPLOAD ERROR
r.on("fileError", (file, msg) => {
let row = document.getElementById(file.uniqueIdentifier);
row.getElementsByTagName("span")[0].innerHTML = msg;
console.error(file, msg);
});
// (D) ATTACH
r.assignDrop(document.getElementById("updrop"));
// r.assignBrowse(document.getElementById("browseButton"));
});
md templates
md static
md temp
md upload
move S2_upload.html templates
move S2_upload.css static
move S2_upload.js static
virtualenv venv
call venv\Scripts\activate
pip install flask
python S1_server.py
mkdir -m 777 templates
mkdir -m 777 static
mkdir -m 777 temp
mkdir -m 777 uploads
mv ./S2_upload.html ./templates
mv ./S2_upload.css ./static
mv ./S2_upload.js ./static
virtualenv venv
source "venv/bin/activate"
pip install flask
python S1_server.py
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment