0

Estou implementado o sistema de Dropzone.js em um sistema, porem, preciso limitar o tamanho da imagem. Como pego estas informações para limitar o upload que não esteja dentro dos padrões?

    
    
	Dropzone.options.dropzoneFrom = {
		autoProcessQueue: false,
		acceptedFiles:".jpg, .jpeg",
                maxFilesize: 1, 
		maxFiles:3,
		addRemoveLinks:true,
                dictFileTooBig: "Imagem supera o tamanho permitido ({{filesize}}Mb). Tamanho maximo: {{maxFilesize}}Mb.",
                  createImageThumbnails: false,
                accept: function(file, done) {
                console.log(file.width)    
                if (file.name === "teste.jpg") {
                  done("Naha, you don't.");
                }
                    else { done(); }
                },
                
               
                
                
		init: function(){
			var submitButton = document.querySelector('#submit-all');
			myDropzone = this;
			submitButton.addEventListener("click",function(){
				myDropzone.processQueue();
			});
			/*this.on("complete",function() {
				if(this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
				{
					var _this = this;
					_this.removeAllFiles();
				}
			});*/
		},
	};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>     
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
  
  
  <div class="container">
			<br/>
			<h3 align="center">Upload de arquivo</h3>
			<br/>
			
			<form action="upload.php" class="dropzone" id="dropzoneFrom" style="  border: 2px dashed rgb(54, 183, 0);">
			</form>
			<br/>
			<br/>
			<div align="center">
				<button type="button" class="btn btn-info" id="submit-all"> Upload</button>
			</div>
				
			<br/>
			<br/>
		</div>

1 Resposta 1

1

As propriedades file.width e file.height não existem no Dropzone. Basta você fazer um console.log(file) e verá que elas não existem, apenas o file.name e outras (como o peso em bytes), mas não o .width e o .height.

Use a APIFileReader() para pegar as dimensões da imagem. Coloque na função do accept:

var reader = new FileReader();
reader.onload = (function(entry) {
   var image = new Image(); 
   image.src = entry.target.result;
   image.onload = function() {
      console.log(this.width); // mostra o width
      console.log(this.height); // mostra o height
   };
});
reader.readAsDataURL(file); 

Só que, como a função do .onload é assíncrona, você terá que fazer os devidos tratamentos dentro dela.

3
  • Blz, obrigado, vou tentar implantar aqui e ver o resultado 24/09/2019 às 16:44
  • 1
    Veja aí e qualquer coisa pode me chamar aqui.
    – Sam
    24/09/2019 às 16:46
  • Funcionou perfeitamente, obrigado pela ajuda!!! 24/09/2019 às 17:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .