search

dfa1234 / ngx-image-compress

Angular library for uploading and compressing images
https://image-library.app
MIT License
86 stars 37 forks source link

Listen to change event in iOS #15

Closed nicovitt closed 3 years ago

nicovitt commented 4 years ago

We ran into an issue where it is not working in iOS. We built an angular PWA and Safari has some issues by listening to the change event. There were no problems in Chrome or Firefox. We found this related issue (https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only) and fixed the corresponding file "ngx-image-compress.js". Right before inputElement.click() in the uploadFile() method we implemented document.getElementById("mediacontainer").appendChild(inputElement);. For iOS the file has to be actually in the DOM so we append it to an element. Perhaps even document.appendChild(inputElement); would work but we haven't tested this.

Would it be possible to add this or something like this to your existing implementation?

Thanks, Nico

dfa1234 commented 4 years ago

Good insight. Since you already have the proper environment and all the key of the problems, I propose you to make send a PR, that I will publish via npm. If not I will make the correction myself, but I need organize some time, test from iOS, etc... Whatever is the case: thank :)

sedaplaksa commented 4 years ago

We ran into an issue where it is not working in iOS. We built an angular PWA and Safari has some issues by listening to the change event. There were no problems in Chrome or Firefox. We found this related issue (https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only) and fixed the corresponding file "ngx-image-compress.js". Right before inputElement.click() in the uploadFile() method we implemented document.getElementById("mediacontainer").appendChild(inputElement);. For iOS the file has to be actually in the DOM so we append it to an element. Perhaps even document.appendChild(inputElement); would work but we haven't tested this.

Would it be possible to add this or something like this to your existing implementation?

Thanks, Nico

Heyy tried this method out but it didnt work for me. Would u mind sharing the code to see how u implement it if its working correctly

amunguia90 commented 4 years ago

Adding document.body.appendChild(inputElement); before inputElement.click(); in ngx-image-compress.js worked for me. I tested my app in iOS and Android devices and the issue seems to be solved. Thank you @nicovitt.

dfa1234 commented 3 years ago

Done in the new version 11.0.2.

nicovitt commented 3 years ago

Oh boys. Didn't get the notification that I was mentioned here. Sorry for the late response. Thanks for implementing the fix @dfa1234 !