Estou fazendo uma aplicação web com o firebase, nessa aplicação tenho um cadastro de imagens (opcional), semelhante a ideia de um perfil (o usuário pode ter ou não uma imagem cadastrada se não tiver é carregado uma imagem padrão), gostaria de saber como faço para verificar se existe um arquivo daquele usuário?
Obs: para "relacionar" o banco de dados (realtime database) com o armazenamento (storage) eu cadastro as imagens usando a chave do usuário como nome, por exemplo cadastro de usuário com uma chave xyz, se ele cadastrar uma imagem, ela vai estar em firebase.storage().ref('xyz')
Se o modo como eu uso estiver errado me digam a forma certa de se fazer.
Pensei primeiro em criar uma chave: valor
com o caminho para a imagem no banco de dados, mas achei ocupação de espaço desnecessário, além disso teria que, de algum modo, verificar o nome do arquivo para não repetir
Para mostrar os dados eu chamo a função mostrar()
dentro do forEach
de leitura:
function ler() {
database.ref(referencia_database).once('value').then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var chave = childSnapshot.key
var obj = childSnapshot.val()
var urlImagem;
storage.ref(chave).getDownloadURL().then(function(url) {
// A imagem existe
urlImagem = url;
console.log(urlImagem);
}).catch(function(error) {
switch (error.code) {
case 'storage/object_not_found':
// A imagem não existe
urlImagem = './image/default.png';
console.log(urlImagem);
break;
default:
// Ocorreu um erro desconhecido
break;
}
});
mostrar(chave, obj.nome, urlImagem)
})
})
}
function mostrar(chave, nome, url) {
div.innerHTML += '<a href="#container">' +
'<div class="col s12 m4 l3" onclick="selecionar(\'' + chave + '\')">' +
'<div class="card">' +
'<div class="card-image">' +
'<img src="' + url + '">' +
'<span class="card-title">' + nome + '</span>' +
'</div>' +
'</div>' +
'</div>' +
'</a>'
}
forEach
também? Porque do jeito que está não consigo ver que valores estão sendo passados para a funçãomostrar()
.getDownloadURL()
é assíncrona. Isso significa que no momento em que você chama amostrar()
, o valor daurlImagem
ainda não foi definido. Por isso que você deve chamar amostrar
nothen()
ou nocatch()
como mostro na minha resposta editada