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.

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?

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.

Nice nice, any chance you can share that one? 

yes no problem, on this thread or somewhere else? (still quite new)

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;

        }

----------------

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.

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.

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.

Hmm not sure why it would crash then...expected it to be the html 5 canvas thing

is working on a reply...