données transmises avec résolution (x) est reçue comme non définie

Question

J'essaie de passer un url que je reçois de la fonction getDownloadURL() ci-dessous, il est près du bas du code. Tout ce côté du problème semble fonctionner - sauf qu'il semble que le resolve pourrait ne pas fonctionner correctement:

// Return a promise to catch errors while loading image 
    getMediaFormulas(options, square): Promise<any> { 

    // Get Image from ionic-native's built in camera plugin 
    return this.camera.getPicture(options) 
     .then((fileUri) => { 

     // op Image, on android this returns something like, '/storage/emulated/0/Android/...' 
     // Only giving an android example as ionic-native camera has built in cropping ability 
     if (this.platform.is('ios')) { 

      return this.crop.crop(fileUri, { quality: 2 }); 
     } else if (this.platform.is('android')) { 
      // Modify fileUri format, may not always be necessary 
      fileUri = 'file://' + fileUri; 

      /* Using cordova-plugin-crop starts here */ 
      return this.crop.crop(fileUri, { quality: 2 }); 
     } 
     }) 
     .then(newPath => { 
     console.log(newPath); 
     if(newPath) { 
     let fileName = newPath.substring(newPath.lastIndexOf("/") + 1, newPath.length); 
     let filePath = newPath.substring(0, newPath.lastIndexOf("/")); 
     this.file.readAsDataURL(filePath, fileName).then(data =>{ 
      console.log("IN READASDATAURL GETMEDIAFORMULAS"); 
      //let strImage = data.replace(/^data:image\/[a-z]+;base64,/, ""); 
      //this.file.writeFile(this.file.tempDirectory, "image.jpg", strImage); 
      //let blob = dataURItoBlob(data); 

      //let file 

      //this.getFileEntryRead(this.file.tempDirectory + '/image.jpg', square); 
      var dataURL = data; 

      let image  : string = 'formula_' + this.username + '_' + new Date() + '.png', 
      storageRef : any, 
      parseUpload : any, 
      thisUrl: any; 

      return new Promise((resolve, reject) => { 
      storageRef  = firebase.storage().ref('/formulas/' + this.username + '/' + image); 
      parseUpload  = storageRef.putString(dataURL, 'data_url'); 

      parseUpload.on('state_changed', (_snapshot) => { 
       // We could log the progress here IF necessary 
       console.log('snapshot progess ' + _snapshot); 
       }, 
       (_err) => { 
       reject(_err); 
       console.log(_err.messsage); 
       }, 
       (success) => { 
       storageRef.getDownloadURL().then(url => { 
        console.log(url); 
        thisUrl = url; 
        console.log("IN READASDATAURL GETMEDIAFORMULAS UERLRLRLR"); 

       }); 

       resolve(thisUrl); 
       }) 
      }).catch(function(error) { 
       console.log(error.message); 
      }); 


     }) 
     } 


     }); 


    } 

Je dis la resolve peuvent ne pas fonctionner à cause du côté où l'getMediaFormula est appelé, rien revient dans la fonction then - url est indéfini. Il est retourné dans l'une des sélections pour un actionsheet:

presentActionSheet3() { 
    let actionSheet = this.actionSheetCtrl.create({ 
     title: 'Choose source', 
     buttons: [ 
     { 
      text: 'Camera', 
      handler:() => { 
      let itemArrayTwo = this.profComponents.toArray(); 
      this.cameraService.getMediaFormulas(this.optionsGetCamera, this.square).then((url) => { 
       actionSheet.dismiss(); 
       this.navCtrl.push(FormulapostPage, { path: url }); 
      }); //pass in square choice 
      //this.myrenderer.setElementAttribute(this.itemArrayTwo[this.square - 1].nativeElement, 'src', 'block'); 
      console.log('camera clicked'); 
      //actionSheet.dismiss(); 
      } 
     },{ 
      text: 'Photo Library', 
      handler:() => { 
      let itemArrayTwo = this.profComponents.toArray(); 

      this.cameraService.getMediaFormulas(this.optionsGetMedia, this.square).then((url) => { 
       setTimeout(() => { 
       console.log(url + " url url url url") 
       actionSheet.dismiss(); 
       this.navCtrl.push(FormulapostPage, { path: url }); 
       },3000); 

      }); //pass in square choice 
      //this.myrenderer.setElementAttribute(this.itemArrayTwo[this.square - 1].nativeElement, 'src', 'block'); 
      console.log('camera clicked'); 
      //actionSheet.dismiss(); 
      } 
     },{ 
      text: 'Cancel', 
      role: 'cancel', 
      handler:() => { 
      console.log('Cancel clicked'); 
      } 
     } 
     ] 
    }); 
    actionSheet.present(); 
    } 

Le problème est le then de l'appel à getMediaFormulas est de retour et url non défini, mais dans le code où est récupéré, dans la promesse, il est créé correctement et utilisé dans resolve comme ceci resolve(thisUrl). Pourquoi url n'est pas défini dans la feuille d'action?

Answer 1

Il y a deux problèmes avec ce code:

Comme indiqué dans mon commentaire, vous devez retourner la promesse readAsDataUrl, par exemple:

... 
let fileName = newPath.substring(newPath.lastIndexOf("/") + 1, newPath.length); 
let filePath = newPath.substring(0, newPath.lastIndexOf("/")); 
return this.file.readAsDataURL(filePath, fileName).then(data =>{ 
     console.log("IN READASDATAURL GETMEDIAFORMULAS"); 
     ... 

Et en plus, comme le souligne @trincot, la résolution est dans la mauvaise portée, et devrait être d'un niveau supérieur, par exemple:

... 
(success) => { 
    storageRef.getDownloadURL().then(url => { 
    console.log(url); 
    thisUrl = url; 
    console.log("IN READASDATAURL GETMEDIAFORMULAS UERLRLRLR"); 

    // Should be here, not outside of this then. Though as you mentioned it my have only been outside due to your testing 
    resolve(thisUrl); 
}); 
...