Typescript HTML5 API Typings

Question

Anyone know if there exists type definitions for the HTML5 File API? Specifically:

FileList
File
Blob
FileReader

Also in Angular there is a document.defaultView object that represents the window, but it does not the full Window interface with respect to the Html5 File API, so it would be necessary to cast document.defaultView to an instance that has the Window interface for the file API.

They should be a part of the standard DOM type library lib.dom.d.ts. — MTCoster
– MTCoster, Commented Nov 14, 2018 at 17:06
Does not look like the Window interface has File and FileReader properties on it, which probably explains why Typescript complains when we attempt to use that namespace in Angular. — Ole
– Ole, Commented Nov 14, 2018 at 17:17
You could potentially use declaration merging to attach File and FileReader to the Window interface. — Jake Holzinger
– Jake Holzinger, Commented Nov 14, 2018 at 17:24
So if we try to do this: ` const w = document.defaultView; ` and ` this.hasHtml5FileApiSupport = w.File && w.FileReader && w.FileList && w.Blob; ` the VSCode draws red squigglies under the properties that are not defined on the Window interface. — Ole
– Ole, Commented Nov 14, 2018 at 17:25

Jake Holzinger · Accepted Answer · 2018-11-14 17:38:46Z

1

I cannot tell you why File and FileReader are not included on the Window object already. You can certainly open an issue with typescript to see if they plan on adding them. In the meantime, the easiest way to "patch" this oversight would be to use declaration merging.

Window.d.ts

interface Window {
    File?:File;
    FileReader?:FileReader;
}

Now File and FileReader will be available on the Window object anywhere in your project.

answered Nov 14, 2018 at 17:38

Jake Holzinger

6,0732 gold badges23 silver badges35 bronze badges

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

1 Comment

Ole Over a year ago

I added another related answer here: stackoverflow.com/questions/53292312/…

Collectives™ on Stack Overflow

Typescript HTML5 API Typings

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related