kostysh / File-uploading-component-for-Sencha-Touch

Ext.Button based component for uploading files in Sencha Touch apps without page refresh
51 stars 26 forks source link

Sencha touch 2.2.1 and Iphone IOS6 not working #18

Open gristoi opened 10 years ago

gristoi commented 10 years ago

Hi, i have got this working with android and windows phones, but cannot get the file uploader to work in IOS6 on an iphone. are there any known issues with this?

When you click on the browse button absolutely nothing happens. you are not presented with an option to pick an image from your gallery / take photo etc.

Are there any sencha patches needed for this?

kostysh commented 10 years ago

yes, this issue has appeared after moving to the new Sencha Touch 2.2.1 not fixed yet. If you have a time, please debug this issue

mphox commented 10 years ago

I'd like an update on when this is fixed, do you have any idea what the problem is or when it will be fixed?

PradyumnaNaik commented 10 years ago

Hi,

A very handy plug-in. Can you please let us know when it will be usable with ST 2.2.1?

Cheers.

lelit commented 10 years ago

The problem seems to be fixed in Touch 2.3.0b1.

I isolated and backported the following change that apparently is enough to get the upload button doing its job on iOS 6:

diff --git a/touch/src/event/publisher/TouchGesture.js b/touch/src/event/publisher/TouchGesture.js
index a12beec..7b781e4 100644
--- a/touch/src/event/publisher/TouchGesture.js
+++ b/touch/src/event/publisher/TouchGesture.js
@@ -326,11 +326,6 @@ Ext.define('Ext.event.publisher.TouchGesture', {
         this.invokeRecognizers('onTouchStart', e);

         parent = target.parentNode || {};
-
-        // Prevent all emulated mouse events by stopping the default of touchstart. This will also stop the focus event.
-        if (Ext.os.is.iOS && !isNotPreventable.test(target.tagName) && !isNotPreventable.test(parent.tagName)) {
-            e.preventDefault();
-        }
     },

     onTouchMove: function(e) {

Of course you may need to apply the same change to the compacted sources (that is, sencha-touch-all.js & C) if you use those.

Hope this helps, bye, lele.

lelit commented 10 years ago

FYI, while the above may work wrt the upload button, it introduces nasty side effects, in particular the whole viewport become scrollable and thus breaks most scrollable widgets such as Lists...

I'm currently using the following variant:

diff --git a/touch/src/event/publisher/TouchGesture.js b/touch/src/event/publisher/TouchGesture.js
index a12beec..cfcec6c 100644
--- a/touch/src/event/publisher/TouchGesture.js
+++ b/touch/src/event/publisher/TouchGesture.js
@@ -328,7 +328,12 @@ Ext.define('Ext.event.publisher.TouchGesture', {
         parent = target.parentNode || {};

         // Prevent all emulated mouse events by stopping the default of touchstart. This will also stop the focus event.
-        if (Ext.os.is.iOS && !isNotPreventable.test(target.tagName) && !isNotPreventable.test(parent.tagName)) {
+        if (Ext.os.is.iOS
+            && !isNotPreventable.test(target.tagName)
+            && !isNotPreventable.test(parent.tagName)
+            // lele 16ago2013: let it flow thru INPUT FILE, so the
+            // upload buttons do the right thing
+            && (target.tagName != 'INPUT' || target.type != 'file')) {
             e.preventDefault();
         }
     },

that seems to work, without unwanted side effects.

fahadonline commented 10 years ago

@lelit getting following error on Safari 5.1.7 for Windows 7 64-bit.

ReferenceError: Can't find variable: FileReader

image

kostysh commented 10 years ago

Hi, Your browser (Safari 5.1) has very old version and not support FileReader javascript API. You can check availability of any HTML5 features here: http://caniuse.com/#search=fileReader

Best regards, Kostya

On Mon, Sep 30, 2013 at 3:35 PM, fahadonline notifications@github.comwrote:

@lelit https://github.com/lelit getting following error on Safari 5.1.7 for Windows 7 64-bit.

ReferenceError: Can't find variable: FileReader

[image: image]https://f.cloud.github.com/assets/1949992/1236922/bfb19e42-29cc-11e3-9d30-ef60a3754ee1.png

— Reply to this email directly or view it on GitHubhttps://github.com/kostysh/File-uploading-component-for-Sencha-Touch/issues/18#issuecomment-25356423 .

tstkenny commented 10 years ago

By the Git version, I can only make it working on Android, not even Windows Chrome. Really love this project. Kostysh please kindly fix it when you have spare time! Cheers!