getting video file from input and displaying it in Typescript

Question

I am using this code to get my hands on an image that was just "uploaded" into browser using <input type="file"> and sending data to some component that uses it.

 fileReady(e) {
    let file: File = e[0];
    let image = new Image();
    let src: string;

    image.onload = function () {
      src = image.src;
      //do something with image

    }.bind(this);
    src = URL.createObjectURL(file);
    image.src = src;
  }

This work well for images. Next goal, is to make it work with videos too. There is unfortunately no Video() constructor and HTMLVideoElement also doesn't do the trick. How should I rewrite this code so that it can handle videos?

you can use Blob type

Niladri
– Niladri

2017-11-20 18:32:37 +00:00
Commented Nov 20, 2017 at 18:32 — Niladri
– Niladri, Commented Nov 20, 2017 at 18:32
Could you share an example?

sanjihan
– sanjihan

2017-11-20 19:00:29 +00:00
Commented Nov 20, 2017 at 19:00 — sanjihan
– sanjihan, Commented Nov 20, 2017 at 19:00

Юра Панарин · Accepted Answer · 2017-11-20 21:49:06Z

3

Like this:

fileReady(e) {
      const file: File = e[0];
      const fileReader = new FileReader();
      fileReader.onloadend = (event: any) => {
        const arrayBuffer = event.target.result;
        const fileType = "video/mpeg";
        const blob = new Blob(arrayBuffer , {type: fileType });
        const src = URL.createObjectURL(blob);
        video.src = src;
      };
      fileReader.readAsArrayBuffer(file);
    }

edited Nov 20, 2017 at 21:49

answered Nov 20, 2017 at 20:39

Юра Панарин

8498 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sanjihan Over a year ago

Thank you sir! I am getting an error on the line: e.target.result, saying that result does not exist on type EventTarget

Юра Панарин Over a year ago

@sanjihan i fixed

sanjihan Over a year ago

Thanks. I ended up doing a typecast: const beforeResult = <FileReader>e.target; . And for future readers... Blob takes an array of blob parts, as in const blob = new Blob([arrayBuffer] , {type: fileType });

Abderrahim Over a year ago

Hello @ЮраПанарин can you take a look at my question please stackoverflow.com/questions/52978624/…

Arun Gupta · Accepted Answer · 2020-05-20 17:24:59Z

1

Just to add a latest update in the answer,

const blob = new Blob(arrayBuffer , {type: fileType });

will give error that the Blob needs an iterable. So the fix is :

const blob = new Blob([arrayBuffer], {type: fileType });

answered May 20, 2020 at 17:24

Arun Gupta

1731 silver badge7 bronze badges

Collectives™ on Stack Overflow

getting video file from input and displaying it in Typescript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related