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

Ionic Framework ionic-v3
1

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

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.

2

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

1 Like
3

Cmolnar is correct!

To a more detailed answer, follow steps:

[.html]
<input type="file" #filechooser multiple />

[.ts]


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

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

...
ngOnInit() {
        this.listenerInputChange();
}

    /**
     * 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 = evt.target.files as File[];
                for (let i = 0; i < files.length; i++) {
                    this.items.push(files[i]);
                }
            }, false);
        };
        wireUpFileChooser();
   }
2 Likes
4

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

5

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.

6

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.

Thanks

7

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 https://angular.io/api/core/ElementRef