javascript file input onchange not working [ios safari only]

Question

The code below works everywhere except on safari mobile. Apparently the onchange is never triggered.

 // create a hidden file input element
 var input  = document.createElement("input");
 input.type = "file";
 
 // when the input content changes, do something
 input.onchange =
 function(event)
 {
  // upload files
 }

 // Trigger file browser
 input.click();

I have found similar examples however they all refer to scenarios where there is even a form of some other visible representation of the file input and they all involve form-clearing workarounds. That wouldn't work here.

This code is being called upon clicking a picture, in order to upload a new one as a replacement.

Any hints? Anything I'm doing wrong?

Answer 1

I'll be damned: on iOS safari two extra conditions are necessary compared to other browsers:

1) The input must be actually appended to the DOM.

2) setting .onchange won't work: addEventListener must be used instead.

Answer 2

should append input element to the real dom.

 // create a hidden file input element var input = document.createElement("input"); input.type = "file"; document.body.appendChild(input); // when the input content changes, do something input.onchange = function(event) { // upload files document.body.removeChild(input) } // Trigger file browser input.click();