Preview Video Before Uploading with HTML5 and VueJS

I believe it’s good UX to allow the user to preview their media files before uploading them to a server. This is for both audio and video files. Coming from the last tutorial where we previewed an MP3 file, you will notice a lot of the code here is very similar. Previewing a selected video file in an HTML5 video element is VERY similar to previewing a selected audio file in an HTML5 audio element. Both make use of the modern elements.

If you need a re-fresher on selecting files with VueJS, I’d recommend checking out “Uploading Files With VueJS and Axios“. We will be building off of that tutorial first. I’ll show all the code, but a few more in depth explanations can be found there.

For a fully function component, check out our Github repository.

Step 1: Add An HTML5 Video Element

The first thing we need to do is add an HTML5 Video element to your component. This will allow you to preview the video once the user has selected one. Add the following to your component:

<video id="video-preview" controls v-show="file != ''"/>

The three things to notice are the id, controls and v-show="file != ''". The id you can set to be whatever you want to reference later on. This gives us an easy way to set up the video preview.

Adding the controls attribute adds some simple video controls that make it easy for the user to preview the video they are adding.

Finally, we have v-show="file != ''". This just hides the element until the user selects a file. The only other thing I’ll mention, is you should apply some sort of styled width constraint to your video element. If I upload a 1080p video, it’s going to expand to the whole screen without a constraint.

Next, we just have to limit what files can be selected on our file input.

Step 2: Limit File Uploads to be Video Only

Since we are previewing a video, we want to limit the file upload to video only. Now, if you want to allow the user to upload any file and preview it IF it’s a video, you’d handle that similar to our image previews, where the name is checked for a valid video file.

However, we just want to allow the user to upload video files. To do that, add accept="video/*" to your file upload input:

<input type="file" accept="video/*" @change="handleFileUpload( $event )"/>

Your file input will only select video files! However, be aware you will have to perform server side validation on these inputs. It’s easy to remove that attribute and submit malicious file formats. It’s a wonderful UX feature so someone doesn’t upload a file that isn’t a video, but should not be trusted!

Step 3: Add Video Preview Function

This function will look very similar to our image and audio file methods. To implement this, add the following to your methods:

previewVideo(){
    let video = document.getElementById('video-preview');
    let reader = new FileReader();

    reader.readAsDataURL( this.file );
    reader.addEventListener('load', function(){
        video.src = reader.result;
    });
},

The first part of this method is to initialize the tools we need. First, we reference our video element by ID. This allows us to work with the element. Next, we initialize our FileReader(). The file reader will read in what file was selected by the user and display it in the video element.

Once our reader is initialized, we call the function readAsDataURL( this.file ). This will read in the file selected so we can work with it. We also bind the event listener load and pass a callback function to work with the data once it has been read in.

Within our callback function, we set the video.src = reader.result. Since we read in the file as a data URL, we can set it as the src attribute to our video element and the user can preview the video. The reader.result is the result of what the FileReader() read from the file that was passed in.

We now just have to tie it all together!

Step 4: Tying it All Together

Now that we have our previewVideo() method, we have to call it. To do that, we should call it after the user has selected a file so we have a video to preview. Update your handleFileUpload() method to look like:

handleFileUpload( event ){
    this.file = event.target.files[0];
    this.previewVideo();
},

When a user selects a file, we will set the file and then preview the video. That’s all there is to it! Now the user can ensure they upload the right video before they submit it to the server. This is even more important since video uploads can take awhile!

Conclusion

Hoped this helped a little bit and allowed you to build a better user experience for your app. Working with files can be tricky, but little features like this make it easier for the user. Have any questions, feel free to reach out in the comment section below!

The next tutorial is one of my favorites. We will be reading in a CSV file in the browser, allowing for data edits and then submitting it to the server. This is extremely powerful for data validation by a user before it gets submitted to the server.

If you are building a single page application with VueJS, check out our book! We dive in depth on all sorts of VueJS tips and tricks for large scale applications. You can see how file uploads play a part in a bigger picture of an application.