Unable to clone file entry element in Safari and Chrome. FF and Opera are fine

Question

It is very strange. I have a simple form. I have a file entry element outside this form.

The user clicks the file entry element and selects the file. I am cloning the input file with this code:

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

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

I notice when a file input element is cloned and added to a form element, it does not copy its values. It only clones the empty element of the input file. This is normal?

Is there something wrong with my jQuery code? Or is it a security issue, and why are Safari and Chrome preventing me from doing this? If the latter, why FF and Opera do differently?

Answer 1

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

As for the second part of your question, I'm not quite sure about the problem, but just about the idea. Do you have an identifier on your input? If so, you should bear in mind that this should be unique in the DOM.