This is very strange. I've got a simple form. I have a file input element outside this form.

User clicks the file input element and selects a file. I clone the file input using this code:

$('input[name="song[attachment]"]').clone(true).appendTo('form')

In all browsers: FF, Opera, Safari, Chrome, when I inspect the form element, I see the cloned file input element inside the form. However, when I submit the form in FF and Opera it works. Safari and Chrome submits the form with an empty file input.

I notice when the file input element is cloned and appended to the form element, it doesn't copy over its values. It only clones an empty input file element. Is this normal?

Is there something wrong with my Jquery code? Or is this a security issue and that's why Safari and Chrome are not allowing me to do this? If the latter, why is FF and Opera doing otherwise?