Python 3 Flask Project to Upload Video With Validation & Live Preview it in Video Player in Browser

Welcome folks today in this blog post we will be uploading video with validation and live preview it inside video player in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the below libraries using the below command as shown below

pip install flask

And after that you need to make an app.py file and copy paste the following code

app.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')

def index():

return render_template('index.html')

if __name__ == '__main__':

app.run(debug=True)

As you can see inside the above python code we are importing the flask library and then we are starting out the flask app at the port number 5000. And then we are showing the index.html template when we go to the / route.

Now we need to create the templates directory and inside it we need to create the index.html file and copy paste the following code

And also we need to create the static directory and inside it we need to create the videos directory where we will be storing the uploaded video files and then we also need to create the templates directory where we need to create the templates file

templates/index.html

<!doctype html>
<html>
<head>
    <title>Upload Video</title>
</head>
<body>
    <form action="{{url_for('upload')}}" method="post" enctype="multipart/form-data">
        <input type="file" name="video">
        <input type="submit" value="Upload">
    </form>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Upload Video</title>

</head>

<body>

</form>

</body>

</html>

As you can see we are showing the simple html5 user form where we are allowing the user to select the video file and then we have the submit button to upload the video file.

Validating User Input

Now guys we will be validating the user input by declaring the array of allowed extensions and also we have declared the function where we will only be allowing those extensions such as mp4 for video files

ALLOWED_EXTENSIONS = ['mp4']

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

ALLOWED_EXTENSIONS = ['mp4']

def allowed_file(filename):

return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

And now we need to make the /upload request and inside it we need to upload the video file and apply the validations as well

@app.route('/upload', methods=['POST'])
def upload():
    if 'video' not in request.files:
        return 'No video file found'
    video = request.files['video']
    if video.filename == '':
        return 'No video selected'
    if video and allowed_file(video.filename):
        video.save('static/videos/' + video.filename)
        return render_template('preview.html', video_name=video.filename)
    return 'Invalid video file'

@app.route('/upload', methods=['POST'])

def upload():

if 'video' not in request.files:

return 'No video file found'

video = request.files['video']

if video.filename == '':

return 'No video selected'

if video and allowed_file(video.filename):

video.save('static/videos/' + video.filename)

return render_template('preview.html', video_name=video.filename)

return 'Invalid video file'

As you can see we are using the save() method to upload the video to the static/videos directory and here we are passing the video filename and then we are passing the uploaded video file to the preview.html template file where we will be playing the video file

Preview Uploaded Videos in Browser

Now we will be playing the uploaded videos inside the browser. For this you need to create the preview.html file and copy paste the following code

templates/preview.html

<!doctype html>
<html>
<head>
    <title>Preview Video</title>
</head>
<body>
    <video width="320" height="240" controls>
        <source src="{{url_for('static', filename='videos/' + video_name)}}" type="video/mp4">
    </video>
</body>
</html>