[RESOLVIDO] Me ajudem a corrigir este erro dentro da minha aplicação

6 de janeiro de 2021 12 respostas

Joao_Antonio1 6 de janeiro de 2021

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;

}

}

}

12 Respostas

rodriguesabner 7 de jan. de 2021

Sempre formate o seu código antes de enviar:
formatacao-forum

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]);
    }
  }

Joao_Antonio1 7 de jan. de 2021

Então meu amigo porém eu preciso pegar tanto este arquivo como o nome dele taligado pois estou enviando para o firebase

rodriguesabner 7 de jan. de 2021 1 like

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]);
    }
  }

Joao_Antonio1 7 de jan. de 2021

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

rodriguesabner 7 de jan. de 2021

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)

Joao_Antonio1 7 de jan. de 2021 1 like

Po mano na hora que eu vi eu vi que nao tinha testado assim puts agora foi mano valeu ai man!

Joao_Antonio1 7 de jan. de 2021

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.

rodriguesabner 7 de jan. de 2021

Manda o código de como vc fez, mostra o state tambem

Joao_Antonio1 7 de jan. de 2021

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]);
           }
         }
       }

Joao_Antonio1 7 de jan. de 2021

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.

rodriguesabner 7 de jan. de 2021

let size = (img.size / (1024 * 1024)).toFixed(2);
if(size > 10){
   alert('envie arquivos com menos de 10mb')
} else {
   upload();
}

Joao_Antonio1 7 de jan. de 2021

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

Criado 6 de janeiro de 2021

Ultima resposta 7 de jan. de 2021

Respostas 12

Participantes 2

12 Respostas

Topicos relacionados