Jump to content

XMLHttpRequest 413 error


Destramic

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.