How to implement a cancel method to several downloads being made using Promise.all()

I have a Promise.all() that returns when all my download promises are finished, the downloads are basically several images and are being made with Cordova FileTransfer. I'm trying to add the possibility to cancel the remaining downloads in the list of URLs that is passed to Promise.all(). I tried some ways to do this, but the remaining items are always downloaded anyway.

How my code is right now:

async downloadFunction(arrayToDownload: Object[]): Promise<void[]> {
    let loading = await this.loadingController.create({
        message: 'Touch backgroud to cancel',
        backdropDismiss: true
    });
    await loading.present();

    const fileTransfer: FileTransferObject = this.transfer.create();
    let canceled: boolean = false;

    loading.onDidDismiss().then(obj => {
        console.log(obj); // obj.role will be = 'backdrop' if clicked in background
        if (obj.role === 'backdrop') {
            console.log('canceled');
            //fileTransfer.abort(); -> Tried to abort filetransfer here first, but it seems that it need to be fired during download.
            canceled = true;
            return;
        }
    }); 

    return Promise.all(arrayToDownload.map(element => {
        if (canceled === true) {
            return; // Added a return here, so it would skip the rest, but didn't work                  
        }

        if (element != undefined) {
            // Get data from URL and do other preparations
            //...

            return fileTransfer.download(encodedURI, this.file.externalDataDirectory + 'randomFolder').then(entry => {
                return;

            }, error => {
                console.log("Error while downloading image: ", error);
                return;     
            }).catch(error => {
                console.log("Error while downloading image: ", error);
                return;
            }); 
        } else {
            throw new Error("image url not available");                 
        }

    })).then(() => {
        loading.dismiss();
        return [];
    });
}