Get file metadata in Angular

Question

How can get the video/audio duration time in angular form, when selected a file for upload?

I have get each file in .html form by this event listener:

(change)="fileSelected($event)"

and in .ts file have this code:

attachedFile;

fileSelected($event) {
  this.attachedFile = <File>event.target.files[0]

  var video = document.createElement('video');
  video.preload = 'metadata';

  video.onloadedmetadata = function() {
    window.URL.revokeObjectURL(video.src);
    var duration = video.duration; // here we have duration time but couldn't use out of this scope
  }

  video.src = URL.createObjectURL(this.attachedFile);

  //not available in fileSelected function scope
  console.log(duration); //undefined
}
var foo = duration; // undefined

Typescript's code has non blocking nature.So, I think by the time `video.onloadedmetadata` function is called, the `console.log(duration)` is already executed. — Eeshwar Ankathi, Aug 07 '19 at 02:21
but it not available out of fileSelected function as result of that and only could use console.log beside of declaration — Hama Bohel, Aug 07 '19 at 02:40
You are getting `undefined` error not `Reference Error` which means the same statement applies here, by the time duration is set the rest of the code is executed. — Eeshwar Ankathi, Aug 07 '19 at 02:44
Its correct but there isnt a way for separate them and they execute simultaneously — Hama Bohel, Aug 07 '19 at 03:02

lwairore · Answer 1 · 2019-12-15T10:02:33.253

Related to check-video-length-on-upload-angular. Here is how.

<input type="file" (change)="onVideoChange($event)" accept="video/mp4,video/x-m4v,video/*">
<!-- Preview Section that gets the video metadata for us -->
<video #video autoplay (loadedmetadata)="getDuration($event)" *ngIf="videoUrl" controls class="EYOsld Xpig"
    [attr.src]="videoUrl"> </video>

In the component section...

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
export class VideoComponent implements OnInit {
    videoForm: FormGroup;
    previewVideoUrl;

    constructor(
        private formBuilder: FormBuilder,
        private domSanitizer: DomSanitizer
    ) { }
    ngOnInit() {
        this.videoForm = this.formBuilder.group({
            'video': [null, [Validators.required, Validators.nullValidator]],
            'duration': [null, [Validators.required, Validators.nullValidator]],
        });

    }

    onVideoChange(event) {
        const file = event.target.files[0];
        this.videoForm.get('video').setValue(file);
        const previewVideoFiles = event.target.files;
        if (previewVideoFiles && previewVideoFiles[0]) {
            this.videoUrl = this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(files[0]));
        }
    }

    getDuration(e) {
        const duration = e.target.duration;
        `
        Note the duration is in seconds, hence if you want the duration in minutes the you would have
        /*
            duration = duration / 60 ;
        */
        If you would want to duration in hours, 
        /* 
            duration = (duration / 60) / 60
        */
        `
        this.videoForm.get('duration').setValue(duration);
    }
}



// Final note remember to import `ReactiveFormsModule` from '@angular/forms' and add ReactiveFormsModule in imports section in app.module.ts

Get file metadata in Angular

1 Answers1