Python Flask Resumable Upload

0-PY-RESUME-UPLOAD.MD

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.

S1_server.py

# (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)

S2_upload.css

/* (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;
}

S2_upload.html

<!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>

S2_upload.js

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"));
});

unpack.bat

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

unpack.sh

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