Uploading images via dynamic input element not working on iOS

Question

I am working on an app in which users can upload images to their profile.

The following function is invoked when an event is fired from a child element. It dynamically creates an input element so the user can select a file to upload.

            _changeImage: function () {
                var input = document.createElement('input');
                input.type = 'file';
                input.accept = 'image/*';
                input.addEventListener('change', this._imgChanged.bind(this));
                input.click();
            },

It works on browser and android platforms but fails on iOS.

Could anyone point out what might be causing this problem and how I could approach it?

Answer 1

This problem appears to be related to a security measure in iOS. File input must be manually clicked by the user, not done programatically.

In order to work around this we overlay an invisible input element over the target element.

<input id="inputpic" type="file" accept="image/*" on-change="someFunction">

*keep in mind that on-change is polymer specific so you may want to use onChange

Then we style it with css to have 0 opacity.

       #inputpic {
            opacity: 0;
            position: absolute;
            top: [position_of_target_element];
            left: [position_of_target_element];
            width: [width_of_target_element]px;
            height: [width_of_target_element]px;
            z-index: 10;
        }

I am not particularly happy about this workaround but I tried several other proposed solutions (link below) and found that:

Using a 'hidden' attribute instead of css opacity does not work.

Wrapping the input element in a label element does not work.

More info in this thread.

If anyone else has a better solution I would love to hear back. Thanks!