Publicado em 18 de jun.

Barra de progresso em Upload de imagem, bug do Mozilla?

Opa beleza pessoal? É o seguinte criei uma aplicação javascript aqui, para upload de arquivos(imagens) que mostra uma previa da mesma antes de salvar.

Fiz o testes em alguns navegadores e em 3 não funcionou como esperado.

IE e Edge como era de se esperar por serem péssimos navegadores a coisa não funcionou.

Porém meu descontamento foi com o mozilla firefox (atualizado) cujo o monitoramento do progresso não funciona corretamente.

Assim sendo a medida que o navegador vai lendo o arquivo enviado ele alterar a largura em porcentagem de um elemento html que é a barra de progresso exibindo assim o status do envio. E ai que entra o problema, pois ás vezes no "mozilla" a barra fica entre 1 e 12% independente do tamanho de bits da imagem como se o monitoramento não chegasse ao final, já no chrome, opera e safari o monitoramento se completa.

Se quiserem dar uma olhada e testar para confirmar que é realmente um bug de um navegador específico ficaria grato. Ou mesmo se saber o que está causando essa anomalia.

Obs.: O intuito disso é que depois de criada e prévia vou fazer uma função para cortar e redimensionar o tamanho, pós então criar a função que irá enviar a imagem para o servidor ou mesmo salvar-la como base64 para gravar em banco de dados (ainda não decidir o que realmente vou fazer).

O javascript está bem genérico e simples pois ainda é um embrião do realmente vai ser.

Nota: Fiz o teste no mozilla enviando arquivos "que não são imagem com a função liberada para esses tipos de arquivos sem usar previa" o monitoramento funcionou corretamente como estimado, tipos de arquivo TXT, DOCX, videos, BIN, EXE etc... o problema só são imagens mesmo.

HTML + CSS

Spoiler

<!DOCTYPE html>

<html>
 <head>
 <meta charset="UTF-8">
 <script src="Upload.js" type="text/javascript"></script>
 <title></title>
 <style>
 #dropbox {
 height: 500px;
 width: 100%;
 border: 2px dotted #000000
 }
 #dropbox:hover {
 background: gray
 }
 #progess-bar {
 position: fixed;
 top: 0;
 left: 0;
 height: 2px;
 width: 0;
 background: #ff0000;
 border-top: 1px solid #800000;
 border-bottom: 1px solid #800000
 }
 #preview {
 max-width: 100%;
 overflow-x: scroll
 }
 .img-prev {
 height: 240px
 }
 </style>
 </head>
 <body>
 <div id="progess-bar"></div>
 <div id="preview"></div>
 <div id="dropbox"></div>

 <script>var up = new Upload();</script>
 </body>
</html>

  

	 

	Javascript

 Spoiler

var Upload = function () {
 var $dropField = document.getElementById('dropbox');
 var $progressBar = document.getElementById('progess-bar');
 var $transfer, $file, $reader, $image;
 $upProgress = 0;

 // remover o comportamento padrão do navegador dentro da box de envio
 function stopEvent(event) {
 event.stopPropagation();
 event.preventDefault();
 }

 // obter o arquivo
 function getFile(event) {
 event.stopPropagation();
 event.preventDefault();
 $transfer = event.dataTransfer.files;
 checkFile($transfer);
 }

 // Checar o tipo de arquivo e criar o cabeçalho
 function checkFile(files) {
 $upProgress = 0;
 $progressBar.style.width = 0;
 $reader = new FileReader();
 $reader.addEventListener('progress', progress, true);
 $file = files[0]; // Se for mais de 1 arquivo só seleciona o primeiro
 if (/\.(jpe?g|png|gif)$/i.test($file.name)) {
 createPrev($file);
 }
 }

 // criar uma imagem igual a enviada
 function createPrev(file) {
 var preview = document.getElementById('preview');
 $image = document.createElement('img');
 $image.classList.add('img-prev');
 $image.file = file;
 preview.appendChild($image);
 $reader.addEventListener('load', loadPreview, true);
 $reader.readAsDataURL(file);
 }

 // exibir a imagem enviada
 function loadPreview(event) {
 $image.src = event.target.result;
 setTimeout(function () {
 $upProgress = 0;
 $progressBar.style.width = 0;
 }, 500);
 }

 // barra de progresso
 function progress(event) {
 if (event.lengthComputable) {
 $upProgress = Math.round((event.loaded / event.total) * 100);
 $progressBar.style.width = $upProgress + '%';
 }
 }

 // Adicionar os eventos drap & drop no box de envio
 $dropField.addEventListener('dragenter', stopEvent, false);
 $dropField.addEventListener('dragover', stopEvent, false);
 $dropField.addEventListener('drop', getFile, false);
};

Discussão (0)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<html> <head> <meta charset="UTF-8"> <script src="Upload.js" type="text/javascript"></script> <title></title> <style> #dropbox { height: 500px; width: 100%; border: 2px dotted #000000 } #dropbox:hover { background: gray } #progess-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: #ff0000; border-top: 1px solid #800000; border-bottom: 1px solid #800000 } #preview { max-width: 100%; overflow-x: scroll } .img-prev { height: 240px } </style> </head> <body> <div id="progess-bar"></div> <div id="preview"></div> <div id="dropbox"></div> <script>var up = new Upload();</script> </body> </html> Javascript Spoiler var Upload = function () { var $dropField = document.getElementById('dropbox'); var $progressBar = document.getElementById('progess-bar'); var $transfer, $file, $reader, $image; $upProgress = 0; // remover o comportamento padrão do navegador dentro da box de envio function stopEvent(event) { event.stopPropagation(); event.preventDefault(); } // obter o arquivo function getFile(event) { event.stopPropagation(); event.preventDefault(); $transfer = event.dataTransfer.files; checkFile($transfer); } // Checar o tipo de arquivo e criar o cabeçalho function checkFile(files) { $upProgress = 0; $progressBar.style.width = 0; $reader = new FileReader(); $reader.addEventListener('progress', progress, true); $file = files[0]; // Se for mais de 1 arquivo só seleciona o primeiro if (/\.(jpe?g|png|gif)$/i.test($file.name)) { createPrev($file); } } // criar uma imagem igual a enviada function createPrev(file) { var preview = document.getElementById('preview'); $image = document.createElement('img'); $image.classList.add('img-prev'); $image.file = file; preview.appendChild($image); $reader.addEventListener('load', loadPreview, true); $reader.readAsDataURL(file); } // exibir a imagem enviada function loadPreview(event) { $image.src = event.target.result; setTimeout(function () { $upProgress = 0; $progressBar.style.width = 0; }, 500); } // barra de progresso function progress(event) { if (event.lengthComputable) { $upProgress = Math.round((event.loaded / event.total) * 100); $progressBar.style.width = $upProgress + '%'; } } // Adicionar os eventos drap & drop no box de envio $dropField.addEventListener('dragenter', stopEvent, false); $dropField.addEventListener('dragover', stopEvent, false); $dropField.addEventListener('drop', getFile, false); };