34

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)

pillarOfLight
  • 8,592
  • 15
  • 60
  • 90

3 Answers3

40

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);
});
Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • 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. – Kevin B Jan 17 '12 at 16:32
  • 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. – Esailija Jan 17 '12 at 16:35
  • 4
    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. – Kevin B Jan 17 '12 at 16:37
  • Oh I see the real problem now. Thanks for explaining. +1 – Esailija Jan 17 '12 at 16:38
  • 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(); – Fallenreaper Sep 10 '12 at 14:08
  • What is the security risk here? If user already selected the file, what is wrong with copying it to another `` created from the same origin? – SOFe Apr 15 '20 at 01:39
  • 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. – Kevin B Apr 15 '20 at 02:29
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;
Ameer
  • 293
  • 3
  • 11
1

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));
});
Adrian Stride
  • 69
  • 6
  • I don't understand, the `.otherinputfield` sits inside `#newform`? It will be good to get the snapshot of the html – Sam Jul 01 '18 at 07:34