One of my clients had a custom client portal built, which lets users login and edit things like their Name, Phone Number, and add a profile picture. During debugging, their staff found an issue that when uploading an image, they would sometimes get an error on the iphone:
A Problem has occurred with this webpage so it was reloaded.
The issue appeared to be intermittent and it took me a lot of testing before I identified the issue.
In this case, the old developers had used Cropbox, which is a plugin that lets you update profile pictures and hasn’t been updated in several years. From looking at the issue tracker, I found a few people indicating they were having issues with mobile safari, but no solutions.
This plugin lets you crop and zoom in on an image prior to uploading, storing it as a base64 encoded text blob in a hidden text field.
The issue only occurred if you cropped and enlarged the image. During testing I found that doing so greatly greatly increased the character count of the base64 image.
For example, without doing any zooming, the base64 image text might have a size of 250K Characters. However, if you hit zoom a couple times, this increased to over 700K characters and this is where the issue became present.
While I was unable to find any hard numbers on what is actually the max character count supported by an input, this appears to exceed it for iphone, but does not seem to cause any issues on most desktop browsers or android phones. To test and verify this was the issue, I created a simple form using an hidden input to store a quite long string:
<input type="hidden" name="test_variable" id="test_variable" value="<?php for($i =0; $i < 7046000; $i++){ echo chr(rand(65,90)); } ?>"class="">
I found that this would cause the error and replacing it with a textarea did not fix the issue.
I am evaluating the options, but given how old the cropbox module is at this point and the lack of support/development over the past couple years(including a report as early as 2015 of a similar issue,) I will likely be replacing it with a different solution.
Add a Comment