Ionic 4 how to get file content from <input>?

Hello all,
I need to code a file-upload for the Browser-Version of my App.
I am trying to use an default like:

                    <ion-input [ngModel]="video.file" id="video" name="file" type="file" accept="video/*"(ionChange)="fileChangeListener($event)"></ion-input>

but somehow i can not get the file contents in any way.
I tried the (ionChange)$event but it only contains the fakepath. No files[] anywhere (not in srcElement or traget or anywhere else)
The ngModel never is set, it is allways ‘undefined’.
When i use <form (ngSubmit)="addVideo($event)"> to get the form data I still don’t get any file contents and the ngModel is still ‘undefined’

what am I Missing?
I need to upload this file with FormData() and HttpClient from ‘@angular/common/http’
but that expects a Blob and i can’t even get a base64 string or ArrayBuffer anywhere

greeting and thank you,
this is probably a pretty stupid question but I am already working on this for 1 Day and can not get it.

ok, this was because of ion-input, it works with <input>

1 Like

Cmolnar is correct!

To a more detailed answer, follow steps:

<input type="file" #filechooser multiple />


import { ElementRef } from '@angular/core';

@ViewChild('filechooser') fileChooserElementRef: ElementRef;
items: File[] = [];

ngOnInit() {

     * Listener the input file component to get the files to be uploaded.
    private listenerInputChange() {
        const wireUpFileChooser = () => {
            const elementRef = this.fileChooserElementRef.nativeElement as HTMLInputElement;
            elementRef.addEventListener('change', (evt: any) => {
                const files = as File[];
                for (let i = 0; i < files.length; i++) {
            }, false);

Thanks! You saved my day. Just an update: in latest versions of Ionic4, nativeElement property seems to has been replaced by “el” property.

I have a strange predicament on my hands.

I can’t get “el” or “nativeElements” from fileChooserElementRef.

Also, console logging the elementRef by itself shows nothing in the logs.

Typing anything after the elementRef shows a message in visual studio saying that direct access to the Dom is not supported when application runs in a web worker.

Hey, it all seemed to be an issue with chrome dev tools.
It just refuses to log anything.

I switched to opera and i was able to use the console to figure out what I needed.


In my case this works (Ionic 5):

const nativeElement = this.fileChooserElementRef.nativeElement as HTMLInputElement;

With fileChooserElementRef being a property of the page component:

@ViewChild('fileChooser', { static: true }) public fileChooserElementRef: ElementRef;

See also