Partage
  • Partager sur Facebook
  • Partager sur Twitter

Cours Angular/Firebase problème sur l'upload

Le problème concerne l'upload de l'image.

Sujet résolu
15 mars 2019 à 17:46:11

Bonjour à tous,

Ce poste concerne un sujet qui a été résolu dont la solution n'a pas fonctionné dans mon cas malgré le fait que j'ai appliqué l'intégralité de ce qui y a été indiqué. Etant donné la résolution de ce dernier j'en ouvre un nouveau, mais pour référence voici le sujet auquel je fais allusion :

https://openclassrooms.com/forum/sujet/cours-angular-firebase-probleme-storage?page=1

Malgré les conseils donnés dans ce poste, j'ai toujours un soucis concernant le fonctionnement de l'upload de l'image.

Voici le message d'erreur de ma console :

POST https://firebasestorage.googleapis.com/v0/b/mon-appli-openclassroom-63.appspot.com/o?name=images%2F1552666828515Artemis.jpg 400
books.service.ts:91 Erreur de chargement ! : [object Object]
core.js:15723 ERROR Error: Uncaught (in promise): [object Undefined]
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)

Le bouton devient grisé de façon permanente après que j'ai tenté d'uploader une image depuis mon ordinateur, serait-ce possible de m'expliquer ce qu'il se passe s'il vous plait ? D'autre part je ne sais pas de quel partie de mon code vous auriez besoin pour m'aider à trouver d'où vient le problème.

Voici le code actuel de UploadFile :

uploadFile(file: File) {
    return new Promise(
      (resolve, reject) => {
        const almostUniqueFileName = Date.now().toString();
        const upload = firebase.storage().ref()
          .child('images/' + almostUniqueFileName + file.name).put(file);
        upload.on(firebase.storage.TaskEvent.STATE_CHANGED,
          () => {
            console.log('Chargement…');
          },
          (error) => {
            console.log('Erreur de chargement ! : ' + error);
            reject();
          },
          () => {
            upload.snapshot.ref.getDownloadURL().then(
              (downloadUrl) => {
                console.log('Upload successful! ('+downloadUrl+')');
                resolve(downloadUrl);
              }
            );
          }
        );
      }
    );
  }



Je vous remercie d'avance et vous souhaites une agréable journée.

-
Edité par radiance63 15 mars 2019 à 17:48:16

  • Partager sur Facebook
  • Partager sur Twitter
Never trust user input.
18 mars 2019 à 8:58:11

Salut,

Je te propose de poster l'intégralité du code sur GitHub on assimilé et de nous donner le lien. 

Comme ça on pourra cloner/reproduire/analyser à loisir.

  • Partager sur Facebook
  • Partager sur Twitter
18 mars 2019 à 13:43:43

Je vais upload sur github et j'éditerais cette réponse pour y joindre le lien, merci beaucoup Raphaelmollon.

EDIT : voici le lien github public : https://github.com/glebacque63/mon-application-angular

Merci beaucoup.

-
Edité par radiance63 19 mars 2019 à 13:38:22

  • Partager sur Facebook
  • Partager sur Twitter
Never trust user input.
20 mars 2019 à 14:43:38

Bonjour Raphaelmollon,

As-tu bien été capable d’accéder au lien GitHub sans problème de droit ? (Je l'ai normalement bien mis en public)

Je n'ai pas upload les nodes_modules de part le gitignores, si ça doit aussi être uploadé n'hésites pas à me le faire savoir, dans le cas contraire n'hésites pas à me dire quelles commande tu as utilisés en amont car il se peut que le soucis vienne aussi des commandes qui ne se sont pas forcément bien exécuté sur mon poste de travail.

Je te remercie d'avance de ta réponse, ainsi qu'à quiconque pouvant me filer un coup de main sur ce problème, et vous souhaites une agréable journée.

  • Partager sur Facebook
  • Partager sur Twitter
Never trust user input.
25 mars 2019 à 23:33:49

Bonjour Radiance63,

je reproduis exactement ton problème. Ci-dessous mon github.

https://github.com/raphlev/angular-firebase

J'ai testé avec ton code actuel de uploadFile ou bien avec le code du cours. Meme comportement.

En regardant de plus prés, le lien dans la console de chrome indique ceci comme erreur:

{

  "error": {

    "code": 400,

    "message": "Permission denied. Could not access bucket angular-firebase-270572.appspot.com. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources."

  }

}

Resolution

- activer firebase realtime database https://console.firebase.google.com/project/xxxx/database/xxxx/data

- vérifier l'onglet firebase storage: l'URL du dossier storage doit être visible gs://<projet>.appspot.com/

Maintenant tout fonctionne correctement de mon coté. le code est dans GitHub.

De ton coté tu dois t'assurer que le storage de ta base  firebase est bien activée.

Raphael

-
Edité par RaphaelPTCLeveque 26 mars 2019 à 23:36:54

  • Partager sur Facebook
  • Partager sur Twitter
27 mars 2019 à 12:04:48

Bonjour RaphaelPTCLeveque,

Je récupère le code ce soir et suivrait tes recommandations pour m'assurer que tout fonctionne après la manipulation.

Merci beaucoup de ta réponse. J'éditerai ce message pour confirmer si tout fonctionne ou non après la manipulation.

  • Partager sur Facebook
  • Partager sur Twitter
Never trust user input.
30 avril 2019 à 14:26:27

Bonjour RaphaelPTCLeveque,

Désolé de ma réponse tardive, entre le travail et les cours ça n'a pas arrêté ces derniers temps.

Je souhaitais te faire savoir que ta solution a fonctionnée, ça venait bien du fait que je n'avait pas été dans l'onglet "storage" pour activer la firebase. Je te remercie encore une fois de l'aides que tu m'as apporté, et vais donc noté ce sujet comme résolu.

Bonne continuation à toi. :)

  • Partager sur Facebook
  • Partager sur Twitter
Never trust user input.
25 octobre 2021 à 19:18:24 - Message modéré pour le motif suivant : Merci de créer votre propre sujet


25 octobre 2021 à 21:36:25

@ValdoSop Bonsoir, merci de ne pas déterrer d'ancien sujet résolu.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter