JS - Unable to change input type to FILE in Safari

Question

[JSFIDDLE]

The code works fine in every browser except Safari:

For some unknown reason, Safari cannot dynamically change the input type to file.

First of all: why is this happening?

And then, is there any workaroud for dynamically changing input type to filein Safari?

Answer 1

I saw this problem only in Safari and older versions of IE. As for the reason, I never found that anything was recorded on this issue.

- jQuery type input, IE. :

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
  throw "type property can't be changed";

.

, , , Safari file. , file . , , , .

, , , file, input, , .

var input = $('#input');

$('button[id^=type-]').on('click', function() {
  var type = $(this).attr('id').replace('type-', '');

  if (type === 'file') {
    var newElement = document.createElement('input');
    newElement.type = type;
    newElement.id = input.attr('id');

    input.replaceWith(newElement);
    input = $('#input');
  } else {
    input.attr('type', type);
  }

  $('#debug-info').html(
    'Trying to change the input type to <strong>' + type + '</strong>.<br>' +
    'Actual input type is <strong>' + input.attr('type') + '<strong>.'
  );

  if (type == input.attr('type')) {
    $('#debug-info').css('color', 'green');
  } else {
    $('#debug-info').css('color', 'red');
  }
});

.