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.""" """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 = Flask(__name__)
app.config["UPLOAD_FOLDER"] = UPLOAD_DIRECTORY
app.config["MAX_CONTENT_LENGTH"] = MAXIMUM_FILE_SIZE
CORS(app)
@app.route("/") @app.route("/")
def root(): def root():
@ -11,16 +25,38 @@ def root():
return render_template("index.html") 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(): def add_to_archive():
"""Accept audio recordings for archiving.""" """Archive recordings sent from the front-end."""
# TODO: implement the saving of the files currently, try:
# I can't seem to get the file to send but the basic file = request.files["file"]
# plumbing is in place except KeyError:
return ("faking it till we make it", 201) 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(): def archive():
"""Serve the archive listing.""" """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 // 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 canvasColour = "white";
var canvasHeight = 400; var canvasHeight = 400;
var canvasWidth = 800; var canvasWidth = 800;
@ -19,7 +19,6 @@ var recordButton;
var recorder; var recorder;
var recording; var recording;
var recordingTimeout = 30000; // 30 seconds (in milliseconds) var recordingTimeout = 30000; // 30 seconds (in milliseconds)
var serverUrl = "http://localhost:5000"; // TODO: read from environment
var shapes = []; var shapes = [];
var stopButton; var stopButton;
@ -57,13 +56,20 @@ function archive() {
**/ **/
var soundBlob = recording.getBlob(); var soundBlob = recording.getBlob();
var httpRequestOptions = { var formData = new FormData();
method: "POST", var date = new Date();
body: new FormData().append("soundBlob", soundBlob), var filename = date.getTime().toString() + ".wav";
headers: new Headers({ enctype: "multipart/form-data" }) 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() { function setupRecording() {

View File

@ -8,9 +8,14 @@
<body> <body>
<ul> <ul>
<li><a href="/">Home</a></li> <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> </ul>
<p>Coming Soon TM.</p>
</body> </body>
</html> </html>

View File

@ -20,7 +20,7 @@
<body> <body>
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li> <li><a href="/archive">Archive</a></li>
</ul> </ul>
<script src="/static/leaflet/leaflet-src.js" charset="utf-8"></script> <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.min.js" charset="utf-8"></script>
<script src="/static/p5js/p5.sound.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="/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> <script src="/static/vocoder.js" charset="utf-8"></script>
</body> </body>
</html> </html>