Estou montando um blog utilizando do react, bom estou usando funções para criar o mesmo e me deparei após fazer alguns consoles que quando eu clico no input para pegar uma imagem do computador ele me retorna null e somente depois quando eu realizo a ação de pegar a imagem ele me retorna sucesso porém ele me retorna a imagem anterior, vou deixar o código aqui.
o input para capturar a imagem esta assim
<input type="file"onChange={handleImage} name=“image” />
função para capturar a ação realizada
const handleImage = async e => {
if (e.target.files[0]) {
const img = e.target.files[0];
if (img.type === ‘image/png’ || img.type === ‘image/jpeg’) {
await setImagem(img.name);
console.log(imagem);
} else {
alert(“Envie uma imagem em formato JPEG ou PNG!”);
setImagem(null);
return null;
}
}
}
Sempre formate o seu código antes de enviar:
Eu tenho um projeto que faz isso
https://github.com/kingaspx/ImagePreview-React.
const handleImageChange = (e) => {
if (e.target.files && e.target.files[0]) {
let reader = new FileReader();
reader.onload = function (e) {
setImagem(e.target.result);
};
reader.readAsDataURL(e.target.files[0]);
}
}
Então meu amigo porém eu preciso pegar tanto este arquivo como o nome dele taligado pois estou enviando para o firebase
const handleImageChange = (e) => {
if (e.target.files && e.target.files[0]) {
let filename = e.target.files[0].name;
let reader = new FileReader();
reader.onload = function (e) {
setImagem(e.target.result);
};
reader.readAsDataURL(e.target.files[0]);
}
}
1 curtida
Então abner nesta parte eu ate estava ciente de como pegar somente o nome porém quando eu passo ele para uma state eu nao tenho retorno deste nome assim como eu havia dito anteriormente no poste somente quando eu insiro uma nova imagem que ai sim eu recebo os valores porem os anteriores nao exibidos
se vc fizer do jeito q fiz acima funciona, sem ficar colocando async em tudo. Só vc usar o state pro nome agora.
setFilename(e.target.files[0].name)
Po mano na hora que eu vi eu vi que nao tinha testado assim puts agora foi mano valeu ai man!
1 curtida
Mano bom dia desculpa ate o incomodo engraçado ontem coloquei este trecho em meu código e ele funcionou porém hoje voltou a dar o mesmo problema de carregar na segunda vez que faz um upload de uma imagem e quando carrega é da imagem anterior 
. O mais estranho que eu fiz um teste de exibir em texto visível o que tem dentro da variável e ele aparece certinho o nome ou então se eu quiser o link para a imagem, mas mesmo assim ainda persiste o error de ontem.
Manda o código de como vc fez, mostra o state tambem
const [imagem, setImagem] = useState(null);
const [imagemName, setImagemName] = useState(null);
const handleImage = (e) => {
const img = e.target.files[0];
if (img.type === 'image/png' || img.type === 'image/jpeg') {
if (e.target.files && e.target.files[0]) {
let filename = e.target.files[0].name;
let reader = new FileReader();
reader.onload = function (e) {
setImagem(e.target.result);
setImagemName(filename);
console.log(imagem);
console.log(imagemName);
uploadImage();
};
reader.readAsDataURL(e.target.files[0]);
}
}
}
Nossa mano fazendo uns outros testes verifiquei que o erro não era bem isso o que acontece é que tem uns arquivos que tem uma quantidade de bytes maior que o esperado parece que o máximo que da para enviar pro firebase são arquvios de 10 mb então eu preciso fazer uma nova verificação para deixar somente arquivos com essa quantidade para baixo e exibir um alerta de error quando o arquivo foi maior do que o esperado.
let size = (img.size / (1024 * 1024)).toFixed(2);
if(size > 10){
alert('envie arquivos com menos de 10mb')
} else {
upload();
}
Perfeito eu adicionei esta linha quando o arquivo e maior que 10 mb
e.target.value = null;
ela básicamente limpa aquele campo que mostra o arquivo que esta selecionado para que ele não fique aparecendo o nome do arquivo mesmo se ele for maior que 10 mb