Setup archiving for real this time

This commit is contained in:
Luke Murphy 2019-12-21 14:39:03 +07:00
parent 87bc40a52b
commit 582c845164
No known key found for this signature in database
GPG Key ID: 5E2EF5A63E3718CC
10 changed files with 71 additions and 22 deletions

View File

@ -1 +1,2 @@
flask==1.1.1
Flask==1.1.1
Flask-Cors==3.0.8

View File

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,9 +1,23 @@
"""Flask server for the vocoder back-end."""
from flask import Flask, render_template, request
import os.path
from pathlib import Path
from flask import Flask, render_template, request, send_from_directory
from flask_cors import CORS
from werkzeug.utils import secure_filename
ALLOWED_UPLOAD_EXTENSIONS = {"wav"}
UPLOAD_DIRECTORY = Path(__file__).parent / "archive"
MAXIMUM_FILE_SIZE = 16 * 1024 * 1024 # 16 MB
app = Flask(__name__)
app.config["UPLOAD_FOLDER"] = UPLOAD_DIRECTORY
app.config["MAX_CONTENT_LENGTH"] = MAXIMUM_FILE_SIZE
CORS(app)
@app.route("/")
def root():
@ -11,16 +25,38 @@ def root():
return render_template("index.html")
@app.route("/add-to-archive/", methods=["POST"])
def allowed_file(filename):
"""Validate uploaded file extensions."""
extension = filename.rsplit(".", 1)[1].lower()
return "." in filename and extension in ALLOWED_UPLOAD_EXTENSIONS
@app.route("/add-to-archive", methods=["POST"])
def add_to_archive():
"""Accept audio recordings for archiving."""
# TODO: implement the saving of the files currently,
# I can't seem to get the file to send but the basic
# plumbing is in place
return ("faking it till we make it", 201)
"""Archive recordings sent from the front-end."""
try:
file = request.files["file"]
except KeyError:
return ("Missing file for upload", 400)
if not allowed_file(file.filename):
return ("File extension not allowed", 400)
secured = secure_filename(file.filename)
file.save(os.path.join(app.config["UPLOAD_FOLDER"], secured))
return ("file archived successfully", 201)
@app.route("/archive/")
@app.route("/archives/<filename>")
def uploaded_file(filename):
"""Retrieve an uploaded recording."""
return send_from_directory(app.config["UPLOAD_FOLDER"], filename)
@app.route("/archive")
def archive():
"""Serve the archive listing."""
return render_template("archive.html")
listing = os.listdir(UPLOAD_DIRECTORY)
files = filter(lambda f: f.endswith(".wav"), listing)
return render_template("archive.html", files=files)

View File

@ -7,7 +7,7 @@
// https://developer.mozilla.org/en-US/docs/web/javascript/reference
//
var archiveUrl = serverUrl + "/add-to-archive/";
var archiveUrl = "http://localhost:5000/add-to-archive";
var canvasColour = "white";
var canvasHeight = 400;
var canvasWidth = 800;
@ -19,7 +19,6 @@ var recordButton;
var recorder;
var recording;
var recordingTimeout = 30000; // 30 seconds (in milliseconds)
var serverUrl = "http://localhost:5000"; // TODO: read from environment
var shapes = [];
var stopButton;
@ -57,13 +56,20 @@ function archive() {
**/
var soundBlob = recording.getBlob();
var httpRequestOptions = {
method: "POST",
body: new FormData().append("soundBlob", soundBlob),
headers: new Headers({ enctype: "multipart/form-data" })
};
var formData = new FormData();
var date = new Date();
var filename = date.getTime().toString() + ".wav";
formData.append("file", soundBlob, filename);
httpDo(archiveUrl, httpRequestOptions); // TODO: add error handling and fix
var config = new Headers({ "Content-Type": "multipart/form-data" });
axios.post(archiveUrl, formData, config).catch(function(error) {
console.log(
"Upload failed!",
"Received the following message:",
error.response.data
);
});
}
function setupRecording() {

View File

@ -8,9 +8,14 @@
<body>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/archive">Archive</a></li>
</ul>
<ul>
{% for file in files %}
<li>
<a href="{{ url_for('uploaded_file', filename=file) }}">{{file}}</a>
</li>
{% endfor %}
</ul>
<p>Coming Soon TM.</p>
</body>
</html>

View File

@ -20,7 +20,7 @@
<body>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/archive">Archive</a></li>
</ul>
<script src="/static/leaflet/leaflet-src.js" charset="utf-8"></script>
@ -28,6 +28,7 @@
<script src="/static/p5js/p5.min.js" charset="utf-8"></script>
<script src="/static/p5js/p5.sound.min.js" charset="utf-8"></script>
<script src="/static/p5js/p5.collide2d.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/static/vocoder.js" charset="utf-8"></script>
</body>
</html>