ng-file-upload can run well on desktop,but not iphone in the ngf-select,just not working

[skygreen2001]

After days for the question,I don't know why;because other people can use it well in phone by goole. So I debug the directive ngfSelect,I found the reason,when mobile click it,it send touchstart,touchend and click event. but if touchend return not trigger the fileElem[0].click(); so when in mobile,It's no effect.

so I modify the ng-file-upload.js by following: 1.comment line 810: // var r = detectSwipe(evt);

2.comment line 812: // if (r != null) return r;

3.modify line 880:

origin code:

    if (!isInputTypeFile()) {
      elem.bind('click touchstart touchend', clickHandler);

new code:

      // elem.bind('click touchstart touchend', clickHandler);
      /* modify by skygreen2001@gmail.com */
      //Platform、Device and Operation
      var system = {
          win: false,
          mac: false,
          xll: false,
          ipad:false
      };
      //check platform is desktop and mobile emulator just only need ‘touchend’,otherwise it will open file window three times
      var p = navigator.platform;
      system.win = p.indexOf("Win") == 0;
      system.mac = p.indexOf("Mac") == 0;
      system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
      system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false;
      if (system.win || system.mac || system.xll||system.ipad) {
        var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
        var u = navigator.userAgent;
        if (null == u) {
          elem.bind('touchend', clickHandler);
        }else{
          var result = regex_match.exec(u);
          if (null == result) {
            elem.bind('click touchstart touchend', clickHandler);
          } else {
            elem.bind('touchend', clickHandler);
          }
        }
      }else{
        elem.bind('click touchstart touchend', clickHandler);
      }

Now It's work well on desktop and mobile,I think it may be help someone.

With a smile,good lucky

[mikeg0184]

@danialfarid, ngf-select also doesn't work for me on the iPhone. It works in v12.2.4, but not anymore starting in v12.2.5.

[skygreen2001]

I see the source code,I think it's right,but I don't know why it's not work,it must have touch event bind clickhandler, then it work well on phone device.but it well trigger three times on desktop web brower mobile emulator like chrome.So I modify the code above.I hope it help you!

[mmathys]

👍 experiencing the same issue

[mmathys]

@danialfarid so... could you maybe explain why this happens? I'm available for looking into it

[skygreen2001]

I have a case which need upload file,I use AngularJS v1.5.8 with ng-file-upload @version 12.2.12, I use it well on my desktop browser at first, but when I change to mobile emulator,when I click the button with attr: ngf-select,nothing happened,then I run it on my phone(andriod),the same issue.

I google this issue with the keyword what I think any way,but I don't get any help.

I guess it's work on the ngf-select directive,so I change the reference to origin file:ng-file-upload.js not mini js files.

Now I debug it on my chrome browser,I find when I run desktop browser mode,it trigger one mouseevent,

but when I run mobile emulator browser mode,it trigger touchstart and touchend event;

So I try to let it trigger clickhandler,now it can open the file dialog,but three times, I run it on my phone,it just run once.I'm want it work the same,so I judge if desktop and mobile emulator,just only use touchend(use touchstart and click no working,it's by my experiment!).

Now it work well follow my need,I'm happy to solve it! I hope it can help you!

[danialfarid]

The demo page works fine on my iPhone for both Chrome and Safari. Could you create a jsfiddle that I could reproduce the issue you are having? Does the demo page work for you? @mmathys

[romeboards]

Also experiencing this issue - rolling back to my most recent version (11.2.2) seems to have alleviated it.

[skygreen2001]

The solution is still have problem on the iphone,It can open the dialog to select a file,but after selected file,it work nothing.then I google more,I try to test everything possible,I find it work well if it's input file;Now I use code by following,it work well on every device and platform:

Solution 1:

      <label>
          <img src="img/p/p.png" alt="" />
          <input accept="image/*" ngf-max-size="50MB"
              type="file" ngf-select="$ctrl.editImg(0, $file, $invalidFiles)" style="position:absolute;left:-9999px;" />
      </label>

Thanks for: http://noypiscripter.blogspot.jp/2014/04/simplest-cross-browser-custom-upload.html

But it still work problem in some conditions,I don't know what trigger it.So I find another solution:

Css Style:

      label img{
        pointer-events: none;
      }

Html Code:

      <div class="cs-block-img" align="right">
          <label for="bImg">
              <img src="file/shareIcon.jpg" alt="" />
          </label>
          <input id="bImg" accept="image/*" ngf-max-size="50MB"
              type="file" ngf-select="$ctrl.editImg(shareItem.id, $file, $invalidFiles)" style="position:absolute;left:-9999px;" />
      </div>

Thanks for: https://snook.ca/archives/javascript/using_images_as

[nitheeshskiploop]

+1