On production (third party hosting) the submission of a form with a lot of images takes an agonising amount of time or more often times out.
I recognise that this is most likely an issue with the hosting provider but was wondering if anyone else had this problem and what needed resolving.
I submitted a form with around 15 images which takes a long time to submit (as expected with 15 images) and monitored the Umbraco/plugins/umbracoContour/files/ folder (refreshing every 20 seconds) expecting to see each file added but none were.
Could this be a permissions issue?
Is it possible to change the location where a file should be saved to give "looser" permissions to the folder. The images themselves aren't sensitive information.
Each photo uploaded has an average size of 1.5mb. I've tried changing the max request length for httpruntime and also the max json length but it hasn't helped.
I implemented a custom field type and it works great, from 1.5mb to 100kb!
It works perfectly in a desktop web browser.
When I try to use it with an IPad it works fine when selecting "chosse existing" but when I select "Take photo" it can cause the broswer to crash when submitting the page. It happens both in safari and chrome.
I was wondering if anyone else had this problem? It's proving difficult to debug.
On my dev server i put in some javascript alerts to see if the image was resized correctly which it is. So it is able to resize the image taken at the time of selecting it.
Contour speed
On development servers contour works great.
On production (third party hosting) the submission of a form with a lot of images takes an agonising amount of time or more often times out.
I recognise that this is most likely an issue with the hosting provider but was wondering if anyone else had this problem and what needed resolving.
I submitted a form with around 15 images which takes a long time to submit (as expected with 15 images) and monitored the Umbraco/plugins/umbracoContour/files/ folder (refreshing every 20 seconds) expecting to see each file added but none were.
Could this be a permissions issue?
Is it possible to change the location where a file should be saved to give "looser" permissions to the folder. The images themselves aren't sensitive information.
Comment author was deleted
Hi,
The file location can not be changed so make sure the permissions on that folder are set as needed.
If you upload a file to the backoffice does it also take so long?
Sounds more like an environment issue...
The issue I think is related to the file size.
Each photo uploaded has an average size of 1.5mb. I've tried changing the max request length for httpruntime and also the max json length but it hasn't helped.
Comment author was deleted
Yup 15 images at 1.5 mb sounds pretty big, updating max request lenght should help with the timeout
Is there a way to resize the image client side?
Comment author was deleted
Yup should be possible with html5 http://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading
So u custom image upload fieldtype...
Hi Tim, thanks for the tip.
I implemented a custom field type and it works great, from 1.5mb to 100kb!
It works perfectly in a desktop web browser.
When I try to use it with an IPad it works fine when selecting "chosse existing" but when I select "Take photo" it can cause the broswer to crash when submitting the page. It happens both in safari and chrome.
I was wondering if anyone else had this problem? It's proving difficult to debug.
Comment author was deleted
Nice nice, any chance you can share that one?
yes no problem, on this thread or somewhere else? (still quite new)
Comment author was deleted
Sure where ever you want :) would love to give that a try ;)
Javascript added to Forms.cshtml
-----------------------------------------
<script type="text/javascript">
function resize(inputName, hiddenInput) {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var file = document.getElementById(inputName).files[0];
var reader = new FileReader();
reader.onloadend = function () {
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function () {
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tempW, tempH);
var dataURL = canvas.toDataURL("image/jpeg");
var hidden = document.getElementById(hiddenInput)
hidden.value = file.name + "|SEP|" + dataURL;
}
}
reader.readAsDataURL(file);
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
</script>
-----------------------------------------
Custom FieldType ProcessValue override
---------------
public override List<object> ProcessValue(HttpContextBase httpContext)
{
List<object> vals = new List<object>();
bool filesaved = false;
var field = httpContext.Request[this.AssociatedField.Id.ToString()];
if (!string.IsNullOrWhiteSpace(field))
{
var fieldValues= field.Split(new string[] { "|SEP|" }, StringSplitOptions.RemoveEmptyEntries);
var imageName = fieldValues[0];
var dataurl = fieldValues[1];
var data = dataurl.Substring(dataurl.IndexOf(",") + 1);
if (!string.IsNullOrEmpty(data))
{
var fileBytes = Convert.FromBase64String(data);
string dir = Configuration.Path + "/files/" + Guid.NewGuid().ToString() + "/";
if (!Directory.Exists(httpContext.Server.MapPath(dir)))
{
Directory.CreateDirectory(httpContext.Server.MapPath(dir));
}
File.WriteAllBytes(httpContext.Server.MapPath(dir + imageName), fileBytes);
vals.Add(dir + imageName);
filesaved = true;
}
}
if (!filesaved)
{
vals.Add(httpContext.Request[this.AssociatedField.Id.ToString() + "_file"] ?? "");
}
return vals;
}
----------------
Comment author was deleted
Cool will give it a try :)
Thanks Tim.
It's stange that the browers completely crash (shutdown) on the ipad. No error on the page.
Comment author was deleted
Yeah works good on a desktop :) not sure how to fix on ipad
:-(
The workaround is to choose an existing image which would require switching between the camera app and website, not ideal.
The problem does not happen with the standard file upload contour provides.
Comment author was deleted
Yeah must be due to the use of html5 canvas...
On my dev server i put in some javascript alerts to see if the image was resized correctly which it is. So it is able to resize the image taken at the time of selecting it.
It uploads the images for the page before crashing.
Comment author was deleted
Hmm not sure why it would crash then...expected it to be the html 5 canvas thing
is working on a reply...