5

I have an upload form for an video. The user clicks browse and selects a file. How can I get the video dimensions the moment the user selects the file (before the file is even uploaded to the server). It obviously has to be something client-side with maybe javascript/jquery or flash/flex (prefer js//jquery though), but can either of them do this?

zmol
  • 2,834
  • 5
  • 26
  • 29

4 Answers4

3

In theory you should be able to use the FileReader API - https://developer.mozilla.org/en/DOM/FileReader

Once the file has been read, you can parse out the headers. As far as I know, nobody has ever done this in javascript.

John Fawcett
  • 696
  • 1
  • 5
  • 13
  • +1 Interesting solution but you'd still need to implement all the possible codecs in JS to actually understand the container/stream headers - which sounds like a bit of a nightmare. +1 for finding a possible solution but I don't think it's viable... – Basic Sep 25 '13 at 00:15
3

Unfortunately, the short answer is you can't - You'd need access to scan the file contents using javascript which isn't allowed. Worse than that, even if you could read the file somehow, you'd need to implement a whole host of codecs in JS just to read the header information.

Mark this one as not possible

Basic
  • 26,321
  • 24
  • 115
  • 201
  • Maybe I don't have to read the file itself, but the metadata. This sort of information should be stored there, or maybe someone knows another trick for doing this – zmol Feb 08 '11 at 12:19
  • I understand what you're thinking but in most OSes, there is no metadata - All you have is a single file with no additional information. Windows / other OSes can parse simple data from known file types which they expose through property dialogs/etc. but fort video, the OS usually needs the codec installed and I've never heard of any way to do that from within JS - In addition, it would be a HUGE security issue - any website could just read metadata about any file on your hard disk... – Basic Feb 08 '11 at 12:24
1

This is a very old question but now it's possible to know video dimensions on client side before upload.

Refer to this question: HTML5 Video Dimensions

Example code:

var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );
Usama Ejaz
  • 1,105
  • 10
  • 20
  • How do you load a video element with a local file in this case? – Basic Oct 26 '20 at 15:14
  • @Basic you could load the local video file using a – Usama Ejaz Oct 28 '20 at 10:54
0

If dimensions is resolution: no

If dimensions is file-size: (now) yes:

Using jQuery, Restricting File Size Before Uploading

Community
  • 1
  • 1
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243