useFilePicker: Doesn't work on IOS

During using your lib I’ve noticed that it doesn’t work in IOS (13.7). The popup opens but after choosing the files nothing changed. I’ve tested it for a little bit and figured out that change event is not fired. After a quick search, I’ve found out that change is not fired if an input is not in DOM. Function openFileDialog creates the input but doesn’t add it to DOM. So, might be worth adding an argument like addToDOM or even do it by default as it very popular case in my view.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 16 (4 by maintainers)

Most upvoted comments

Nothing changes with readFileContent: false

Thank you very much for your PR. I’ve tested it and looks like it works!

Hi @Ivanko5417, we’ve been investigating the issue and as @Jaaneek said, adding the element to the document is not considered a good practice, so we’d like to avoid it. I’ve done some research, and it seems like ios does not always fire change events on inputs: https://stackoverflow.com/questions/8004227/ios-select-onchange-not-firing/10544704#10544704 My suggestion is to try adding onBlur event listener on top of existing onChange listener. In src/helpers/openFileDialog.ts add:

// set onchange event to call callback when user has selected file inputElement.addEventListener(‘change’, callback); // fire a blur event to call a callback on ios devices, as they do not fire onChange event inputElement.addEventListener(‘blur’, callback);

Test cases to cover:

  • try to open a file selector, then close it without choosing any files
  • check if change and blur events interfere with each other in any way on non-ios devices
  • blur event callback should be called only on ios devices

If my solution with blur event doesn’t work or introduces any new bugs, then we’ll accept Your PR.

Hi Man, i will look into it after the weekend. Thank you for pointing that out and sorry for late response.