Can't clone file-input element in Safari and Chrome. FF and Opera are OK

Question

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?

Answer 1

You cannot give a default value for a file input, or even edit it in js. Its default value is always empty. This is a security issue where someone can hide a file input (display:none for example), and upload sensitive data from a client's computer without his knowledge.

As for the second part of your question, I am not entirely sure about the problem but just an idea. Do you have an id on your input? If so, you should take into account that is has to be unique in the DOM.