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)

Thanks for the question. I was doing the exact same thing and ran into the same problem. Nice to know I'm going where others have already gone. — Peter
– Peter, Commented Jan 31, 2013 at 21:49

user400654 · Accepted Answer · 2020-04-15 20:11:35Z

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

edited Apr 15, 2020 at 20:11

answered Jan 17, 2012 at 16:28

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user400654 Over a year ago

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 Over a year ago

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.

user400654 Over a year ago

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 Over a year ago

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

Fallenreaper Over a year ago

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();

|

Ameer · Accepted Answer · 2022-08-12 05:08:26Z

6

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

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

answered Aug 12, 2022 at 5:08

Ameer

4636 silver badges11 bronze badges

Comments

Adrian Stride · Accepted Answer · 2014-10-14 21:24:35Z

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

answered Oct 14, 2014 at 21:24

Adrian Stride

696 bronze badges

1 Comment

Sam Over a year ago

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

General Grievance · Accepted Answer · 2023-10-17 12:35:08Z

0

const fileInput = document.querySelector('inputfield2');
const dataTransfer = new DataTransfer();
dataTransfer.items.add($(".inputfield1")[0].files);
fileInput.files = dataTransfer.files;

edited Oct 17, 2023 at 12:35

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Oct 16, 2023 at 8:20

Hai Nguyen

11 bronze badge

Collectives™ on Stack Overflow

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

4 Answers 4

7 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related