Bonjour ami d'Ionic

Je fais un formulaire pour qu'un user rentre ses infos: nom, age..
J'utilise un form Group avec des FormControl pour chaque fields (tout fonctionne bien pour les inputs textes) mais je voudrai être sur que l'user rentre une photo avant de pouvoir sign up...

J'ai testé deux solutions:

1.)
photo: new FormControl('', [Validators.required]),

par ex sur un button (ou même un input..) qui permettrait de rentrer l'image
Mais le FormControl ne fais pas effet..

Est ce possible de lé vérifier avec un FormControl?

2) tester que ma field item.photo n'est pas vide avant de pouvoir sign up l'user... mais là le problème vient du fait que je stocke les photos avec le uid (la key) de l'item ==> mais que je récupère seulement lorsque je push mon item ds la bdd..

Je n'ai pas d'autres options en tête, ca fait un gros moment que je suis bloqué sur ca... Si quelqu'un a des idées sur ces deux options ou même une autre option ca serait

Merci d'avance

Ionic c’est du Angular, normalement tu peux créer tes propres validator et donc tu peux vérifier qu’une photo a bien été ajoutée, je crois avoir fait un truc comme ça sur un projet.
J’upload la photo derrière je récupère l’id de la photo uploader et mon validator check si j’ai bien un id renseigner pour la photo après tu peux toujours valider dans le submit avant de faire l’appel serveur.

merci de ta réponse

je me suis basé sur ce que tu m'as dit, mais je n'utilise pas le Validator... J'aurai bien aimé l'utiliser.

Ce que j'ai fait :

HTML

<form novalidate (ngSubmit)="validate()" [formGroup]="sellingForm">

<button ion-button (click)="selectPicture()"> </button>

   <button ion-button (click)="validate()"> VALIDER (2/2) </button>

</form> 

TS:

  ngOnInit() {
    this.sellingForm = new FormGroup({
      photo: new FormControl('', [Validators.required]),
    });
  }


    this.camera.getPicture({
      quality: 95,
      destinationType: this.camera.DestinationType.DATA_URL,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      encodingType: this.camera.EncodingType.JPEG,
      targetWidth: 500,
      targetHeight: 500,
    }).then(imageData => {

      this.base64Image = "data:image/jpeg;base64," + imageData;
      this.Picture = imageData;

      this.item.photo = imageData;
      console.log(imageData);

    }, error => {
      console.log("ERROR -> " + JSON.stringify(error));
    });


validateCustom() {
    if (this.item.photo == '') {
      const toast = this.toastCtrl.create({
        message: ' Tu dois rentrer une photo ',
        cssClass: "toast-scheme ",
        showCloseButton: true,
        closeButtonText: "OK",
        position: 'top',
        duration: 8000
      });
      toast.present();


    } else {

//push l'item ds la bdd et apl la fonction pr upload la photo 
      
    }
  }

Voilà donc j'assigne une valeur au moment de rentrer la photo (méthode: selectPicture()) mais comme tu le vois je n'utilise pas de form control... Il faudrai évidemment que je bind mon formControl à cet élément.

Sais tu comment je pourrai ?

Merci en tout les cas

J'ose espérer qu'en angular pure ca marche
https://angular.io/guide/form-validation
dans la doc tu vois forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
et en dessous un code d'exemple ton but est le même

dans ton cas pas sur que t'es besoin de ca tu veux juste valider que this.item.photo est required pourquoi ne pas mettre un formcontrol sur cette propriété

après je ne sais pas si t'es obligé de le déclarer dans la vue au pire tu mets un input de type hidden

merci de ton aide !

J'ai mis un input type hidden et je crois que ca fonctionne ! je vais faire plusieurs tests et te dire

Pour récupérer le url de la photo, je fais ca (dans la fonction que j'ai envoyé juste au dessus) :

this.item.photo = imageData;

sauf que ca ne me donne pas du tout l'url auquel la photo est stocké

Tu sais comment je peux récupérer cette url ? comme ca je l'enverrai ds la bdd au moment du push

parce que c'est pas une url que tu génère mais une image en base64, et tu peux envoyer cette photo en base 64 sur ton serveur et faire les traitement adéquate derrière pour la stocker.

Comment fera-tu pour savoir que ce n'est pas une photo de pangolin ?

Ok je vois à peu près le truc @boucif

Dans mon code, j'ai tenté de le faire comme ca :

  createPost(Picture: string, key: string) {
    let promise = new Promise((resolve, reject) => {
      firebase.storage().ref('/pictures/').child(key).child("first")      
        .putString(this.Picture, 'base64', {contentType: 'image/png'})
        .then((savedPicture) => {

          this.fireS.push({
            Picture: savedPicture.downloadURL,
            name: this.item.uid,
          })
          this.item.photo = savedPicture.downloadURL; // <----  j'ai ajouté ca 
        })
    })
    return promise;
  }

Mais j'ai une erreur "Reference.push failed : first argument contains undefined in property 'list.Picture' validateFirebaseData...."

Je ne vois pas trop où je peux récupérer le bon url

@ouimaisquoi ==> tqt c'est la prochaine étape, je vais créer un système pour checker ca !

Essaye déjà d’affecter ton this.picture à la src d’une image pour voir si l’image fonctionne bien.

Bon j'ai tenté d'affecter mon this.item.picture à : (ds la méthode au dessus selectPicture()):

      this.base64Image = "data:image/jpeg;base64," + imageData;

ou
this.Picture = imageData;

ou encore dans la méthode :

  createPost(Picture: string, key: string) {
    let promise = new Promise((resolve, reject) => {
      firebase.storage().ref('/pictures/').child(key).child("first")  
        .putString(this.Picture, 'base64', {contentType: 'image/png'})
        .then((savedPicture) => {

          this.fire.push({
            Picture: savedPicture.downloadURL,
            name: this.item.uid,
          })
        })
    })
    return promise;
  }

ici j'ai tenté d'assigner le item.photo au retour de la promise, ou encore à Picture (savedPicture.downloadURLà mais rien ne fait le job!

(pour info la photo est bien push ds le storage et l'item ds la bdd)..

Peut ê qu'il y a un lien avec ca ==>
Lorsque j'upload une photo avec la fonction :

 create(Picture: string, key: string) {
    let promise = new Promise((resolve, reject) => {
      firebase.storage().ref('/pictures/').child(key).child("first")    
        .putString(this.Picture, 'base64', {contentType: 'image/png'})
        .then((savedPicture) => {

          this.fireS.push({
            Picture: savedPicture.downloadURL,
            name: this.item.uid,
          })
        })
    })
    return promise;
  }

J'ai un message d'erreur de la console :
"https://firebasestorage.googleapis.com... Failed to load resource: the server responded with a status of 404"

ainsi qu'une erreur:

Error: Uncaught (in promise): Error: Reference.push failed: first argument contains undefined in property 's-list.Picture' validateFirebaseData@ionic://localhost/build/vendor.js:105124:24 ionic://localho...

Par contre j'ai jamais utilisé firebase storage, je pourrais pas t'aider sur ce point là.

Ok ok, pour stocker une image tu n'as pas utilisé Firebase?

Perso, c'était sur des base des données soit sql server soit azure no sql.
J'ai lu la doc et sur le net ils disent que si tu veux uploader une image base64 tu peux utiliser ca :
// Data URL string var message = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB'; ref.putString(message, 'data_url').then(function(snapshot) { console.log('Uploaded a data_url string!'); });

https://firebase.google.com/docs/storage/web/upload-files

ca te permet d'uploader directement tout ton texte avec le tag base64 que tu déclare dans this.base64Image
et ton content-type n'a pas l'air utile dans ce cas la