So, I have this problem, I've tried this on 2 different web hosting services, I strongly believe they both are limiting LimitRequestBody, but none of them will tell me the parameter value since support doesn't have access to this as it is shared hosting and they have very limited access or whatever. The point is I can't be sure why this is happening, I just get the HTTP Error 413 Request entity too large, trying to upload an image through ajax post using a blob.
I first sent the image on a hidden input after converting it from canvas to base64, I got the same error, HTTP Error 413 Request entity too large. So I went on reading about the error for 2 days, about every post here on stackoverflow (not every, but believe me, a lot), until I understood the problem, so I went on testing.
The image the canvas draws, which is the image I'm trying to upload weights about 500 kb, I have had no problem here on my computer using WAMP, I usually code on ubuntu but I'm on my windows computer since clients use windows and I want to replicate every problem while testing, anyway, as I was saying, I have had no problem uploading the pictures in every way I've tried locally, only when I limited through a .htaccess setting LimitRequestBody to 10kb to replicate problem(also tried hacking webhost uploading it to with 10MB limit, of course it didn't work), the response was replicated I got HTTP Error 413 Request entity too large.
So, I've tried basically the next scenarios(I've tried many others, mainly goofing around, but these 3 are the ones that make sense):
- Draw canvas, set hidden input with base64, serialize form and submit on ajax.
- Draw canvas, set hidden input with base64, submit form directly with submit button and submit action value (simplest form submit).
- Draw canvas, create blob on javascript, append to form with FormData, submit through ajax.
Finding that the first 2 scenarios catch the image on server side as regular $_POST input. 3rd scenario catches image as $_FILES on server side.
I had a lot of hopes on 3rd scenario, since I can upload a picture bigger than 1 MB on a simple form with file input. I read a lot on how to convert canvas to file input, which led me to blob solution which didn't work either(on webhost). And I have read a lot about how you can't modify a file input.
So I was wondering if anyone know a simple(or not so simple) work around this?
So far, I'm thinking of uploading it so some cloud storage service, like amazon s3(or something free, i'm just throwing ideas here), requesting image on server side(if possible, just here might be yet another restriction, who knows), but this would make my image uploading to last so much.
So, can anyone think of something I can do besides paying for a better web hosting plan or changing to some other web hosting service?
I'm going to add the blob code just as reference, remember this code has no problems.
var id = selected_cliente.val();
$('#getclienteid').val(id);
fd = new FormData(document.forms[1]);
var dataURL1 = $('#canvas641').val();
if (dataURL1 != ''){
blob = dataURItoBlob(dataURL1);
fd.append('canvashid1', blob);
}
$.ajax({
url: 'ajax.php',
type: 'POST',
data: fd,
contentType: false,
processData: false,
success: function (response) {
var splitresp = response.split('|');
if (splitresp[0] == 'error'){
display_error('2',splitresp[1],'modal');
return false;
}else if(splitresp[0] == 'ok'){
display_error('3',splitresp[1],'modal');
return false;
}else{
display_error('2',response,'modal');
return false;
}
},
error: function (request, status, error) {
alert("error: "+error);
return false;
}
});
The error I get is on alert message "Request entity too large". Since you know, it is limited by web hosting service.
I can catch on server side with $_FILES['canvashid1'], but I get error first, I don't get error on my local WAMP, image uploads correctly.
Any chance you can use new FormData and append it to the actual form as file input?
