Dynamically attach file input into form - not working in Safari / Chrome

I have a form on my page that has validation to determine whether a file was included or not. If no file is selected and the form submitted, I should get a warning displaying:

"Attachment can't be blank"

I am using this ajaxupload plugin (github source) to allow a user to click on an image and enable the file dialogue to pop-up.

This is what happens:

1. User selects a file
2. File input is copied and attached to the form as a hidden input

With all browsers. When I inspect my form element, I can see the file input:

<form ....>
<input type="file" name="song[attachment]" style="position: absolute; right: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 480px; font-family: sans-serif; cursor: pointer; ">
&l开发者_C百科t;/form>

FF and Opera work fine. But Safari and Chrome complain that the file input is blank. i.e. triggering the validation:

"Attachment can't be blank"

But why is Safari and Chrome acting differently? Can I not dynamically attach input elements into the form before submission with these two browsers? Perhaps Safari and Chrome finds it as illegal syntax to rewrite the file input after the form element is loaded?

PS. Haven't tested this yet on IE, since I am on a mac.

Apparently, this is a security issue with Safari/Chrome. I moved the element instead of cloning it. Seems to work now