XMLHttpRequest 413 error

[Destramic]

hey guys im running a XML HTTP request and i'm getting the error 413 - ie. image too large.  I know its js i'm executing but i think its a php problem so i changed some settings in my php.ini

post_max_size = 10M
upload_max_filesize = 10M

here is the js i'm using

	 function upload_image(image){
		  var data = new FormData();
		      xhr  = new XMLHttpRequest();
		      
		  data.append('image', image);
		  xhr.open('POST', 'save.php', true);
		  
		  xhr.upload.onprogress = function(e) {
		    if (e.lengthComputable) {
		      var percentComplete = (e.loaded / e.total) * 100;
		      console.log(percentComplete + '% uploaded');
		    }
		  }
		  
		  xhr.onload = function() {
			  console.log(this.status);
		    if (this.status === 200) {
		      var response =  this.response
		      console.log('Server got:', response);
		    }
		  }
		  
		  xhr.send(data);
	 }

it works with smaller images but when trying to upload a 4.4 mb image i get the error 413...now i'm a little confused on how i'm getting this error as i've changed my post and upload max sizes

 

is there something obvious i'm missing here please?

 

 

thank you

[rwhite35]

Have you tried setting xhr.open( ) third argument to false?  Since XMLHttpRequest default behavior is asynchronous, it may be that the larger file are taking to long to process.  Setting XMLHttpRequest() to false (or synchronous) causes the save.php to completely run before the ready state changes, which in turn complete the request process.  

 

you'll also need to incorporate the readyState and Status in to your function.  It would look something like:

xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
  console.log("done");
  }
}

[Destramic]

ok well i did what you said and it came back with

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ 
413

still 413 error...still working fine on smaller image size

 

thanks for your post

[Jacques1]

Are you sure that your webserver also allows big requests? What happens if you upload the file with a plain form?

[Destramic]

well i'm using my localhost at the moment...running nginx...so there should be no reason why 413 error should come up =/

[Jacques1]

I don't see how the fact that you're running the server locally would automatically prevent any request size problems.

[Destramic]

changing this in my nginx config sorted it

client_max_body_size 	500M;

works great now...but is this the correct debug info i should be getting? as it spits out  xhr.onload twice

99% uploaded 
100% uploaded
200
Server got:  
100% uploaded
done
200 
Server got: uploaded

js:

	 function upload_image(image, name){
		  var data = new FormData();
		      xhr  = new XMLHttpRequest();
		      
		  data.append('image', image);
		  data.append('name', name);
		  data.append('item_id', 2);
		  xhr.open('POST', 'save.php', true);
		  
		  xhr.upload.onprogress = function(e) {
		    if (e.lengthComputable) {
		    	var percentage = Math.round((e.loaded * 100) / e.total);
		      console.log(percentage + '% uploaded');
		    }
		  }
		  
		  xhr.onreadystatechange = function() {
			  if(xhr.readyState == 4 && xhr.status == 200) {
			  console.log("done");
			  }
			}
		  
		  xhr.onload = function() {
			  console.log(this.status);
		    if (this.status === 200) {
		      var response =  this.response
		      console.log('Server got:', response);
		    }
		  }
		  
		  xhr.send(data);
	 }

thank you