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)

Solution 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);
});

Solution 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));
});

Comments

[Kevin B]

I know it doesn't, the clone is a placeholder. We are appending the original to the hidden form, .after() returns the original element, not the element we appended after it. Ideally after the iframe loads, we would empty the original and put it back where it belongs.

[Esailija]

Where did you get that? I thought the OP only asked how to copy the value of a file input field to another, which cannot be done.

[Kevin B]

I provided a workaround to a common problem, getting the value of a file input from one file input to one that is in a hidden form, which isn't possible. The workaround is to move the original into the hidden form, submit the form, then move it back. He didn't give us any form code, so I left that out. The clone is for cosmetic purposes only, you don't want a blank spot to show up in the file field's place.

[Esailija]

Oh I see the real problem now. Thanks for explaining. +1

[Fallenreaper]

I was looking at this code, and when i was trying to do this via a function it was not working as it did not understand what clone was in the line .after(clone)... Instead of it being an on change, i pass the object as a param, so it would be something like $(input) and $clone = $(input).clone();

[Sam]

I don't understand, the .otherinputfield sits inside #newform? It will be good to get the snapshot of the html

[SOFe]

What is the security risk here? If user already selected the file, what is wrong with copying it to another <input type="file"> created from the same origin?

[Kevin B]

i don't recall my thinking of the time, but i believe it was more a reason why they would disallow this ability, not that i knew of any specific reason. i wouldn't be surprised if there was some other way of getting the file and attaching it to another input now days.