ngf-select directive is not working on iOS10 on the device

[TimLasVegas]

I have an existing app that had no problems using iOS9, but now that my phone has been updated to iOS10, the directive for ngf-select will not "trigger" the image picker. I have run through your code, and the directive does load correctly, and the click event does get called on fileElem[0], but nothing happens. Please note, the code does work correctly under the simulators (I am using an iMac). So, there is something new, in iOS10, just on the devices, that is keeping the click event from being properly processed so that the image file picker selections will display.

BTW, I am using the Ionic Framework v1.

[akotlar]

Having the same issue, Angular 1.5.8, using a button elem. Setting type=file does nothing. Have not yet tested whether using a traditional input element would work.

[danialfarid]

Does the demo page work? If yes it might be conflict with another library you have.

[battmanz]

I am having the exact same problem -- Ionic v1 and Angular 1.5.3. I haven't figured out why, but if I run my app using ionic run ios --device, then ngf-select does NOT work. However, if I run my app by opening it up in Xcode and running it that way, then ngf-select does work.

[TimLasVegas]

The problem is that iOS10 is not allowing the click() event on the file input. I have tried a simple file input and another button that calls the input's click event. It works in a browser, but does not work when running on the actual iOS10 device. So, this is not so much the code with ngf-select, but the fact that ngf-select no longer works because the click() event can no longer be called.

If anyone comes up with a workaround, I would really appreciate it. This is killing my app.

[sombriks]

i'm developing a cordova app and the ios version have similar problem.

The following markup works on desktop (linux window macos) and android:

<md-button class="md-raised md-primary" 
           ngf-select="uploadFiles($file)">Carregar imagem</md-button>

<div class="row" layout-align="center center" ng-show="novocoment.mediaidcomentocorrencia">
  <img lt="imgcoment" ng-src="{{baseserver}}/mediastore/{{novocoment.mediaidcomentocorrencia}}"/>
</div>

However it does not work on ios using safari. haven't tested on ios-chrome yet, but this case isn't on my scope.

After a few experiences, i got to this snippet. it seems to work on safari/ios 9.3.5 (on ipad):

<img ng-show="ocorrencia.mediaidocorrencia" class="thumb" ng-style="tam"
ng-src="{{baseserver}}/mediastore/{{ocorrencia.mediaidocorrencia || mediaidocorrencia}}">

<input id="uploadinput" type="file" ngf-resize="{width: 200, quality:0.9}"
ngf-select="uploadFiles($file,'mediaidocorrencia')" ng-model="picFileOcorrencia"
name="file" accept="image/*" ngf-max-size="20MB" ngf-fix-orientation="true">

<md-button class="md-raised md-default"
onclick="document.getElementById('uploadinput').click()">Escolher imagem</md-button>

Why the use of a input type="file" seems to help i have no idea.

[pimrie]

We are also seeing this issue, have the following code:

<div class="avatar-label-link" ng-model="file" name="file" type="file" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" ngf-select="upload($file)" style="color:white;"><span>Change profile image <i class="material-icons avatar-label-icon">photo_camera</i></span></div>

Running within ionic.

Tested working fine using iOS10 on an iPhone 6 but select dialog will not open when running iOS10 on an iPhone 5.

[pimrie]

Update on the above, upgraded an iPhone 5c from iOS 9.3 to 10.1 and the ngf-select item has stopped working (was working prior to upgrade).

[xgat]

+1

[xgat]

As a workaround I placed the input element on top of my button, so that the user will actually tap on the input element which triggers the image picker.
So in my case I eneded up with:
<button class="button button-block" ngf-select="onBtnUploadClick( $files, $invalidFiles )" ngf-multiple="true" ngf-max-size="10MB" accept="image/*,application/pdf"> Upload Picture </button>
<input id="ngf-uploadBtn" style="position:relative;top:-55px;left:0px;width:100%;visibility:visible;opacity:0.01" type="file" ngf-select="onBtnUploadClick( $files, $invalidFiles )" ngf-multiple="true" ngf-max-size="10MB" accept="image/*,application/pdf" multiple="multiple">
I tried to place the input element within the button (so as not to reposition it), but it broke the image picker.
I also tried not to repeat the directives on both elements, but it broke as well.
This is not a great solution, but at least on my device (iPhone5/iOS10, app developed with Ionic) it seems to work.
Anybody else can make a check?

[danialfarid]

As a workaround you can use <input type="file"...> instead of div until the new version which should fix these issues.

[thedewpoint]

@danialfarid if I'm using the drag and drop "dropbox" as featured in the demo, how do I implement this workaround without the file input floating in the middle of the drop box?

[KerryRitter]

I ran into this as well. I tried switching from button (which works on iPhone, android, and pc) to input[type=file], and now it crashes the app on iPad. Using this code:

<input type="file" 
    ngf-select 
    ng-model="$ctrl.fileToUpload" 
    class="button button-positive button-outline button-outline-alt"
    ngf-multiple="false" 
    ngf-allow-dir="false"
    ngf-fix-orientation="true"
    accept="image/jpeg,image/jpg,image/png,video/quicktime,video/x-msvideo,video/x-ms-wmv,video/mp4,video/x-flv" 
    ngf-pattern="'.jpg,.jpeg,.png,.mov,.avi,.wmv,.mp4,.flv'">

UPDATE: This is my fault. I needed to set up some privacy values on the info.plist for accessing files and camera (see http://useyourloaf.com/blog/privacy-settings-in-ios-10/)

[henritoivar]

Solution by M4v3R from here worked: https://forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828

[tpartee]

@henritoivar Could you please share your implementation of the workaround with us? I'm not implementing my own input type="file" field, I'm letting ng-file-upload do that for me using the Angular directives - so how do you "fix" it when the problem's in the directive itself?

For example, my code that's note working:
<button class="btn btn-xs btn-default pos-top-rgt-col" ngf-select="uploadFiles($files)" ngf-accept="'image/*'" multiple="multiple">Upload New Images</button>

When I click that button, I'm able to select files in iOS as normal, they're just never uploading anything and since it's a mobile browser we can't really get any debug/console info to see what's going wrong.

BTW the above works fine in all modern desktop browsers, just not in iOS browsers (Chrome, Safari). Haven't tested Android yet.

[sombriks]

@tpartee in order to debug mobile browsers you could make use of chrome for android phones (google for chrome://inspect) and safari have similar capabilities as well i debug my cordova apps that way.

since it works on android i couldn't haste to call it a bug on the directive itself.

[tpartee]

Perhaps I mis-worded, I didn't mean to imply there's a bug in the directive - what I mean to say is that I do not use an input type="file" in my code, but that element must be created by the directive by necessity - therefore since it's in the directive, how am I supposed to employ the work-around mentioned above? The workaround assumes you have control over both the button and the input element. I only have a button element. If there is a input type="file" element it must be in the directive and therefore it's not clear to me how I can style it to appear over my button as mentioned in the above work-around.

[tpartee]

After deeper testing it seems the issue was in my Angular controller, not in ng-file-upload - my code posted above works fine if you are handling the promise properly and not being an idiot. See the examples for details, they helped me figure out where I went wrong. Tested working on iOS 10 in both Chrome and Safari, tested working in Chrome on current Android, tested working in FF, Chrome and Edge on Windows desktop.

[ncapito]

This is an IOS 10 bug/issue. I can see all of the code getting called but the fileElem[0].click(); is not actually working. I'm assuming this is security related.

Any updates on this?

[sivins]

Bump. This happens to me when using "Add to Home Screen" on iOS 10. Works fine on Safari proper.

<input class="ng-hide" id="input-file-id" multiple type="file" ngf-select="vm.image.getFiles($files)" /> <label for="input-file-id" class="md-button md-raised md-primary">Select Images</label>

[michaelcunningham19]

I'd recommend checking out this issue that I filed a while ago, I encountered something similar related to file uploading. The key for me was conditionally applying the "multiple" attribute.
https://bugs.chromium.org/p/chromium/issues/detail?id=689183

[subpx]

For me this issue was caused by the FastClick polyfill.
Add class="needsclick" to your button. Should fix it

[JSONRice]

Duplicated on iPhone 6s Plus iOS 12.0