Загрузите картинку при регистрации с Firebase

Question

Я использую Firebase.auth для регистрации пользователей на моем сайте. Чтобы получить от них больше информации, я также создаю документ Firestore, в котором хранится больше информации. Вот мой код:

HTML

<div class="col-md-6">
               <div class="row justify-content-center align-items-center h-md-100vh">
                  <div class="col-10 my-5 my-md-0">
                     <h2 class="h4 font-weight-bold">Signup To Become A Player</h2>
                     <form id="player-login-form">
                        <div class="form-group">
                           <input type="text" id="player-signup-firstname" name="player_signup[firstname]" required="required" placeholder="What&#039;s your firstname?" class="form-control">
                           <div class="invalid-feedback mt-0"></div>
                        </div>
                        <div class="form-group">
                           <input type="text" id="player-signup-lastname" name="player_signup[lastname]" required="required" placeholder="What&#039;s your lastname" class="form-control">
                           <div class="invalid-feedback mt-0"></div>
                        </div>
                        <div class="form-group">
                           <input type="email" id="player-login-email" name="player_signup[email]" required="required" placeholder="What&#039;s your email?" class="form-control">
                           <div class="invalid-feedback mt-0"></div>
                           <small id="emailHelp" class="form-text text-muted"></small>
                        </div>
                        <div class="form-group ">
                           <input type="password" id="player-login-password" name="player_signup[password]" required="required" placeholder="Set a password" class="form-control">
                           <div class="invalid-feedback mt-0"></div>
                        </div>
                        <div class="form-group ">
                        <input type="file" accept="image/*" capture="camera" id="cameraInput">
                        </div>
                        <button type="submit" class="btn btn-primary" id="player-signup-button">Create account</button>
                     </form>
                  </div>
               </div>
            </div>

И JS

// The sign up variables and constants
    const signUpBtn = document.querySelector('#player-signup-button');

    // Sign up function 
    signUpBtn.addEventListener("click", (e) => {

        e.preventDefault(); // avoid the page to refresh when we click signup
        // get user info from the id of the input
        const loginForm = document.querySelector('#player-login-form');
        const firstname = loginForm['player-signup-firstname'].value;
        const lastname = loginForm['player-signup-lastname'].value;
        const email = loginForm['player-login-email'].value;
        const password = loginForm['player-login-password'].value;
        // Upload picture part
        var refname = 'photos/' + firstname + lastname;
        let storageRef = firebase.storage().ref(refname);
        let fileUpload = document.getElementById("cameraInput")
        fileUpload.addEventListener('change', function(evt) {
            console.log("Is code going here?");
            let firstFile = evt.target.files[0] // upload the first file only
            let uploadTask = storageRef.put(firstFile).then(function(fileSnapshot) {
                firebase.firestore().collection('players').add({
                    firstname: firstname,
                    lastname: lastname,
                    email: email,
                    profilepic: fileSnapshot.ref.getDownloadURL()
                });
            })
        });
        auth.createUserWithEmailAndPassword(email, password).catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            M.toast({html:error.message});
        }).then( cred => {
            loginForm.reset();
        });

    });

** Мой вопрос: ** У меня есть проблемы с загрузкой изображения часть. Похоже, что код внутри fileUpload.addEventListener не читается интерпретатором.

У вас есть идеи, в чем проблема?

Answer 1

Вам нужно поместить эту регистрацию обратного вызова вне обработчика щелчков:

document.getElementById("cameraInput").addEventListener('change', function(evt) {...});

Прямо сейчас ваш код говорит: «После того, как пользователь отправит форму, начните прислушиваться к ним, чтобы просмотреть изображение», когда вы действительно нужно, чтобы «когда страница загружалась, начните прислушиваться к просмотру изображения пользователем. После этого, когда они отправляют форму, читают выбранный файл изображения и отправляют его на сервер».