file.width and file.height - Does not work in Dropzone.js

Question

I am implemented the system of Dropzone.js in a system, however, I need to limit the size of the image. How I take this information to limit upload that is not within the standards?

    
    
	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>

Answer 1

The properties file.width and file.height do not exist in the Dropzone. Just do a console.log(file) and you’ll see that they don’t exist, only file.name and others (such as the weight in bytes), but not the .width and the .height.

Use the APIFileReader() to pick up the image dimensions. Put in the function of 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); 

Only, as the function of .onload is asynchronous, you will have to do the proper treatments within it.