Using onloadedmetadata to show information from a user uploaded video, before it’s uploaded.

It’s always good to give your user a summary of what they’re going to upload, before it’s actually uploaded. I’ll keep this one short, we’re using a file input to allow the user to upload a file. And whenever the element changes, we’ll use javascript to get some information, in this case, the duration of the video and we’ll show a quick sample of the video.

Let’s just stick with the code. Minimalism is key – I’ve used 26 lines of javascript and a bit of HTML and CSS. I’ve used TailwindCSS to get some quick styling in.

Play on CodePen

See the Pen async/await/promise extended by Marinus (@mklasen) on CodePen.

Github Gist