I can not get Croppie to work on Android when I local test it

[io-ma]

Hi,
Thank you for the plugin!
I love it especially for the possibility of exporting cropped images as blobs ;-)
Well, everything works great on my desktop, but when I test my app on my Android ( I have a Google Nexus 5), I can not make it work.
Everytime I click the select image button, it doesn't open any image. Instead the button greys out. I can still click it and it greys out even more till I can not see it :-)
I inspected the source in my Android Chrome (used web dev tools on Chrome for remote devices) and I get a warning everytime I click the button: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
When I open the details of the warning it points me to a line in my app's Framework 7.
Googled the warning but I still have no clue.
I attach a print screen (just clicked twice so you can still see the button)

Also, here's the code I am using:

`$('#file-btn').on('click', function(ev) {
var action = $(ev.target).data('action');
if (action === 'select') {
$('#croppie-upload').trigger('click');
$('#croppie-upload').on('change', function() {
readFile(this);
$('.rotate-btn').on('click', function(ev) {
ev.preventDefault();
$uploadCrop.croppie('rotate', (parseInt($(this).data('deg'))));
});
$('#file-btn').data('action', 'use').text('Use');
});
}

            else if (action === 'use') {
                $('#croppie-upload').off();
                $uploadCrop.croppie('result', {
                    type: 'blob',
                    size: 'viewport'
                }).then(function(resp) {
                    var blob = resp;
                    var formdata = new FormData();
                    formdata.append('image', blob);`

I have a single button with an initial data-action="select". I don't want to use two different buttons, one for selecting the image , the other for uploading it to the server. So this is why I change data-action on input's change, to "use".
If you could help me , it would be great, I really want to use your plugin :-)
All the best,
Ioana

[io-ma]

Ok, I managed to make that "button greyed out" behaviour to go. I can upload the image , but it takes lots of time till the choose action dialog appears. On Firefox ( Android) I can choose the image , but it doesn't show up in the preview area. If I click the use button I end up with a white image as avatar.
Update:
Now it is ok, it works on Chrome for android. The warning - [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive- is still there.
I inspected your upload demo and the warning is there too. (line 709 in croppie.js, there is a prevent default there)
Also , I couldn't manage to make it work on Firefox for Android. Neither your demo.

[thedustinsmith]

As far as the passive event listener, since you've already go the debugging environment set up, can you try referring to this issue: OwlCarousel2/OwlCarousel2#1750

Maybe we just need to add touch-action: none to the .cr-overlay styles.

Referring to the upload code, if you want to take the time to improve the demo so it works in all environments, that'd be great. Unfortunately, I don't have the time to do so. It doesn't affect croppie's functionality.

[io-ma]

Ok, let me check if that workaround does solve the warning. Then I will try to see what happens in the upload code.

[io-ma]

Your fix works, I created a pull request.

[thedustinsmith]

Thanks! Looks great. I'll pull it down and make sure it doesn't negatively affect anything else, but I don't know when.

Can this issue be resolved now?

[io-ma]

yes
will let you know if I made it work in firefox on android as well :-)