VueJS: Secure File Upload to S3, Directly from the Browser

VueJS: Secure File Upload to S3, Directly from the Browser
In this tutorial, we’ll add S3 (AWS) file upload to our admin’s video edit form. Because we host our backend at Heroku, it’s not a good idea to upload large files (such as long videos) through the server, so we decided to upload directly from the browser

. This creates some unique challenges (such as using your secret key without compromising it) which we address in the walkthrough.

Disclaimer: I am not a security expert or an AWS expert. If you have feedback about security, please comment below and I’ll incorporate it when I update the video for the VueScreencasts site. If you have questions about AWS… sorry, it was enough of a struggle getting my stuff working.

Table enhancement with the thousands of data rendering

Auxiliary text display with vuejs

Visual Studio Code Syntax Highlighting For Vue3 And Vue2

Anyways, enjoy the video!

0:00 Start
2:12 Getting a file from input
8:07 Setting up S3
12:43 Getting S3 credentials securely
15:41 Uploading Files with aws-s3
31:16 Loading Indicator
34:43 Vuetify’s v-file-input (and some other improvements)
41:40 Conclusion and review

The “Building a VueJS Screencasting App From Scratch” Playlist:


Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

Create Shopping basket page With Vuejs and Nodejs

Vue.js Tutorial: Zero to Sixty

Learn Vue.js from Scratch - Full Course for Beginners

Learn Vue.js from scratch 2018

Learn Vue.js - Full Course for Beginners - 2019