Marinus Klasen

Marinus Klasen

  • Development
  • Consultancy
  • Developer Resources
  • Blog
  • Contact

February 11, 2022

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

Marinus Klasen

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

About Marinus Klasen

Marinus has been working in software/web development for more than a decade. Since 2020 his attention shifted on sharing knowledge and developing products and tools for sharing knowledge.

Marinus Klasen on Twitter

Looking for a WordPress expert?
Hire top notch developers on Codeable!

Consult an expert

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get in touch

Contact me using the details below

Marinus Klasen

Wilhelmina van Pruisenweg 35, 2595 AN Den Haag

marinus@mklasen.com
twitter.com/marinusklasen
linkedin.com/in/marinusklasen

  • GitHub
  • LinkedIn
  • Twitter

Have you read?

  • Elementor Widget UsageMarch 27, 2025
  • Programmatically showing popups with ElementorMarch 25, 2025
  • The Elementor sanitize_settings errorSeptember 12, 2024
  • Announcing.. Wooping Shop Health!June 13, 2024
  • Swiper setup when using wp-scriptsMarch 14, 2024

Copyright © 2025 ยท Marinus Klasen | Webdesign by Team Rood