Ionic 3 - Defer file download until folder created


#1

I’m working on an app where it needs to download the files to custom folder in the mobile. Here’s the code I’ve used,

downloadImage(imageURL) {

    file.createDir(this.storageDirectory, 'FolderName', false);

    const fileTransfer: FileTransferObject = this.transfer.create();          
    const imageName = imageURL.split('/').pop();

    fileTransfer.download(imageURL, this.storageDirectory + 'FolderName/' + imageName).then((entry) => {
        const alertSuccess = this.alertCtrl.create({
            title: `Download Succeeded!`,
            subTitle: `${imageURL} was successfully downloaded to: ${entry.toURL()}`,
            buttons: ['Ok']
        });
        alertSuccess.present();
    }, (error) => {
        console.log(error)
        const alertFailure = this.alertCtrl.create({
            title: `Download Failed!`,
            subTitle: `${imageURL} was not successfully downloaded. Error code: ${error.code}`,
            buttons: ['Ok']
        });
        alertFailure.present();
    });
}

Based on some references, I tried to use promise like this.

downloadImage(imageURL) {
  var folderName = 'FolderName';
  this.createDirectory(folderName);
  console.log('After CreateDirectory');
  this.platform.ready().then(() => {
      const fileTransfer: FileTransferObject = this.transfer.create();        
      const imageName = imageURL.split('/').pop();

      fileTransfer.download(imageURL, this.storageDirectory + 'FolderName/' + imageName).then((entry) => {
          const alertSuccess = this.alertCtrl.create({
              title: `Download Succeeded!`,
              subTitle: `${imageURL} was successfully downloaded to: ${entry.toURL()}`,
              buttons: ['Ok']
          });
          alertSuccess.present();
      }, (error) => {
          console.log(error)
          const alertFailure = this.alertCtrl.create({
              title: `Download Failed!`,
              subTitle: `${imageURL} was not successfully downloaded. Error code: ${error.code}`,
              buttons: ['Ok']
          });
          alertFailure.present();
      });
  });
}

createDirectory(folderName): Promise<Boolean> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('createDirectory = ' + folderName)
    }, 5000);

    if(!this.platform.is('cordova')) {
      return false;
    }

    if (this.platform.is('ios')) {
      this.storageDirectory = this.file.externalRootDirectory;
    }
    else if(this.platform.is('android')) {
      this.storageDirectory = this.file.externalRootDirectory;
    }
    else {
      return false;
    }

    this.file.createDir(this.storageDirectory, folderName, false)
    .then((success) => {
      resolve(true);
    })
    .catch((error) => {
      reject(false);
    });
  });
}

When I click on the link which triggers this function, it shows a popup like “Allow MyApp to access photos, media…”, but before the user press “Allow” button, it’s displaying the error popup. I tried keeping this inside the async block, but still I’m facing the same issue.

How to defer the flow until the user confirms the popup? Any help on this would be much appreciated.