I created a Flask application that handles large video uploads, and manipulates them. My app works just fine, until I deploy it onto a web hosting (I use PythonAnywhere).
PythonAnywhere limits uploads to be a maximum of 100MB in size, which is way too small for my app, since client-side uploads could reach 6GB in size.
My idea is to split the users' videos to chunks of under 100MB each before I save the video they uploaded.
I came across this JavaScript API named Plupload, which suits my situation and would solve my problem.
The issue is, that I am not familiar with JavaScript to the level that I would be able to figure out how to integrate Plupload with my current Flask app; thus, I need help with it.
Bits and pieces of my current files, enough for a Minimal, Reproducible Example.
templates/upload.html
:
<script>
function myfunction(event) {
const video = document.createElement('video')
video.src = URL.createObjectURL(event.files[0]);
var url = event.value
if (url.substring(url.lastIndexOf('.') + 1).toLowerCase() == 'mp4') {
// pass
} else {
window.alert("Only h264 codec .mp4 filetypes, and 1920x1080 dimension videos that are under 6GB in size are supported. Please upload another file.")
return
}
if (event.files[0].size / 1024 / 1024 / 1024 >= 6) {
window.alert("Only h264 codec .mp4 filetypes, and 1920x1080 dimension videos that are under 6GB in size are supported. Please upload another file.")
return
}
video.addEventListener( "loadeddata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
console.log(`${width}x${height}`)
if (width === 1920 && height === 1080) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
document.forms["myform"].submit();
} else {
window.alert("Only h264 codec .mp4 filetypes, and 1920x1080 dimension videos that are under 6GB in size are supported. Please upload another file.")
}
}, false );
}
</script>
<form id='myform' name='myform' action = "{{ url_for('upload') }}" method = "POST"
enctype = "multipart/form-data">
<label for="file" class="custom-file-upload">
<i class="button button2">Upload Match Video</i>
</label>
<input id="file" type="file" name="file" accept=".mp4" onchange="myfunction(this)" style="display: none"/>
</form>
flask_app.py
:
@app.route('/upload', methods=['GET', 'POST'])
def upload():
if request.method == "GET":
return render_template('upload.html', static_folder='static')
f = request.files['file']
session['filename'] = secure_filename(f.filename)
session['path_to_video'] = os.path.join(app.config['UPLOAD_FOLDER'], session['filename'])
f.save(session['path_to_video'])
return redirect("/video")
Directory structure:
app/
static/
uploaded_file.mp4
templates/
upload.html
flask_app.py
My goal:
app/
static/
uploaded_file_chunk1.mp4
uploaded_file_chunk2.mp4
uploaded_file_chunk3.mp4
templates/
upload.html
flask_app.py