0

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
U13-Forward
  • 69,221
  • 14
  • 89
  • 114
  • 2
    I checked the Github repo for Plupload and found that it is not maintained in the last couple of years. Have you tried https://stackoverflow.com/a/53001103/3129414 this yet? – arshovon Feb 17 '23 at 06:52

0 Answers0