Download function doesn't work when moved to globals

Ionic Framework ionic-v3
1

In my Ionic app, I want to download certain files. The TransferObject should be accessible on every page, so I moved my download function to my global variables. Note that the download worked just fine when it was not in globals. Here’s what I have:

providers/global/global.ts

import {Injectable, ChangeDetectorRef} from '@angular/core';
import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';
import { File, Entry } from '@ionic-native/file';

@Injectable()
export class Global {

public progress_locatie1: string;
public progress_locatie2: string;

public progressbar_locatie1=false;
public progressbar_locatie2=false;

public downloadbutton_locatie1=true;
public downloadbutton_locatie2=true;

public playbutton_locatie1=false;
public playbutton_locatie2=false;

constructor(public ref: ChangeDetectorRef, public file: File, public transfer: Transfer) {
    this.progress_locatie1 = '0';
    this.progress_locatie2 = '0';
     }
public fileTransfer_locatie1: TransferObject = this.transfer.create();
public fileTransfer_locatie2: TransferObject = this.transfer.create();

setProgress(location, value) {
    this['progress_'+location]=value;
    this.ref.detectChanges();
}

getProgress(location) {
    return this['progress_'+location];
}

setStatusOfObject(object,location, value)
{
    this[object+'_'+location]=value;
}

getStatusOfObject(object,location)
{
    return this[object+'_'+location];
}

startDownload(locatie)
{
    this.setStatusOfObject('downloadbutton',locatie,false);
    this.setStatusOfObject('progressbar',locatie,true);

    this['fileTransfer_' + locatie].download('https://someurl.com/'+locatie+'.mp4', this.file.dataDirectory + 'path/to/downloads/'+locatie+'.mp4').then((entry) => {
        console.log('download complete: ' + entry.toURL());

        this.setStatusOfObject('progressbar',locatie,false);
        this.setStatusOfObject('playbutton',locatie,true);

    }, (error) => {
        console.log('error');
        console.log(error);
    });

    this['fileTransfer_' + locatie].onProgress(progressEvent => {
        if (progressEvent.lengthComputable) {
            console.log("### Download percentage ###: "+(progressEvent.loaded / progressEvent.total));
            this.setProgress(locatie,Math.round((progressEvent.loaded / progressEvent.total) * 100));
        } else {
        }
    });
}

cancelDownload(locatie)
{
    this.setStatusOfObject('downloadbutton',locatie,true);
    this.setStatusOfObject('progressbar',locatie,false);
    this.setStatusOfObject('playbutton',locatie,false);
    this.setProgress(locatie,"0");
    this['fileTransfer_' + locatie].abort();
}

}

pages/somepage/somepage.ts

import {Global} from '../../providers/global/global';
export class SomePage {
constructor(private global: Global) {
}

downloadnative(locatie)
{
    this.global.startDownload(locatie);
}

cancel_download(locatie)
{
    this.global.cancelDownload(locatie);
}
}

pages/somepage/somepage.html

<button ion-button full color="light" *ngIf="global.getStatusOfObject('downloadbutton','locatie1')" (tap)="downloadnative('locatie1')">Download</button>

When I press the download button, nothing happens. No console output, nothing. Everything worked fine when the download part was in pages/somepage.ts, but as I said, I want to access the TransferObject on other pages too.

Extra info: the startDownload function itself is called, but the download doesn’t start.

2

I’m not sure what the problem is, but doesn’t this design have a problem if one download is already in progress when another wants to start up? Maybe you are ensuring somehow else that that can’t happen, but I would feel safer having separate transfer objects for each download.

3

It should be possible to start multiple downloads at a time.
In the example above, there are two possible downloads, each with their own transfer object: fileTransfer_locatie1 and fileTransfer_locatie2.

4

I figured it out after a lot of trial and error. Changing this:

public fileTransfer_locatie1: TransferObject = this.transfer.create();
public fileTransfer_locatie2: TransferObject = this.transfer.create();

to:

public fileTransfer_locatie1: TransferObject;
public fileTransfer_locatie2: TransferObject;
...
startDownload(locatie)
{
  this.fileTransfer_locatie1 = this.transfer.create();
  this.fileTransfer_locatie2 = this.transfer.create();
  ...
}

fixed my problem.