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

Leave a Reply Cancel reply

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

Ready to take action?

I'm looking forward to discuss your projects and goals!
Feel free to reach out using the contact details below.

Marinus Klasen

[email protected]
twitter.com/marinusklasen
linkedin.com/in/marinusklasen

  • GitHub
  • LinkedIn
  • Twitter

Have you read?

  • An easy way to copy code blocks from the WordPress Block EditorJune 9, 2022
  • Set a static IP for docker-compose containersMay 25, 2022
  • Justified auto width in Media Carousel Widget in ElementorMay 18, 2022
  • Using the WordPress REST APIMay 18, 2022
  • Remove all edit post links in WordPress with a simple filterMay 11, 2022

Copyright © 2022 · Marinus Klasen | Webdesign by Team Rood