Ionic native File Transfer in Browser


#1

Is it possible to use the ionic file transfer plugin in a PWA (browser)? Because in the docs “Browser” is in the supported platforms list, but I have read on some posts in this forum or stackoverflow, that it is not working in browser. And for me it is really not working. Here is my function to upload an image file:

upload(endpoint, file, params){

    var url = constants.API_URL + endpoint + this.FORMAT;
    var options: FileUploadOptions = {
        fileKey: "file",
        fileName: "file.jpg",
        chunkedMode: false,
        mimeType: "image/jpg",
        params: params
    };
    return this.fileTransfer.upload(encodeURI(file), url, options);

}

I copied it from a last ionic project, which was for android and ios, and there it was working. Now in the PWA it is doing nothing, not even an error message and no request to the server. So is it really not working in browser or must I do something different? And if it is not working, is there an alternative to upload an image to the server with a PWA?


#2

This works for me:


#3

I just copied your code and I’m getting the same error as here:

Can’t bind to ‘uploader’ since it isn’t a known property of ‘div’. (“div ng2FileDrop [ngClass]=”{‘nv-file-over’: hasBaseDropZoneOver}" (fileOver)=“fileOverBase($event)” [ERROR ->][uploader]=“uploader” class=“well my-drop-zone”>

How did you solve that?

EDIT:

Solved it with this: https://stackoverflow.com/questions/45303404/angular-2-cant-bind-to-uploader-since-it-isnt-a-known-property-of-input?noredirect=1#comment77574329_45303404


#4

Ok yes it’s working. Do you know if it is possible to send a file together with other request parameters?


#5

Have you tried:
this.uploader = new FileUploader({authToken:'Bearer '+stored_token ,url: URL+"/VARTOBEPASSEDWITHFILE"});


#6

Ok yes right that is also possible. I did it now with:

this.uploader.setOptions({additionalParameter: this.myData});

Do you know how I can get the response of an upload? If I use

this.uploader.queue[0].upload();

I wan’t to know if it was successful or if there was an error. I saw there are functions like onErrorItem, but I dont know how to use them.

EDIT:

Found it:

this.uploader.onErrorItem = (item, response, status, headers) => {
    console.log(response);
};