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

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();