copying the value of a form's file input field to another form's input field

Question

So I have two forms, both have a file type input field and I tried

$('.inputfield1').change(function(){
   var file = $(this).val();
   $('.inputfield2').val(file);
});

but then it doesn't get copied properly and firebug complains about "Security Error" in the error console

what did I do wrong and how can I properly copy the value of a file input field

by the way, the destination form has a target that is set to an iframe (not a different domain)

Answer 1

You can't move the value of one file input to another. Instead, clone the input, place the clone where the original is, and move the original into the hidden form.

$(".inputfield1").change(function(){   var $this = $(this), $clone = $this.clone();   $this.after($clone).appendTo(hiddenform); }); 

Answer 2

I know it is a late answer, but I had a similar problem that I just figured out today.

What I did was move the File input to the new location after deleting the current one in the other location. By moving the element, everything stayed intact on all my tests.

$('.inputfield1').change(function() {   $('.otherinputfield').remove();   $('#newform').append($(this)); }); 

Answer 3

If you need to copy the file from one input to another, you could use the below method.

$(".inputfield2")[0].files = $(".inputfield1")[0].files;