copy html input file element from one form to another

Question

Hi i have a requirement like follows i have a file element in one form this form contains many other fields also so i cannot submit it but after the file has chosen i need to upload that so i created the second form with iframe. I am not able to copy the file element from one form to another especially in ie i tried with cloneNode and appendChild both are not working any suggestions. i am really stuck.

<form name ="form1">
   <input type="file"/>
</form>

<form name="form2">       
<form>

Why not use fileuploadui js plugin? It does the background upload process for you. — Arkadiusz 'flies' Rzadkowolski, Jul 13 '12 at 08:14
i have created my own file upload component so cannot use any other plugins. any simple solutions. — saravanan shanmugavel, Jul 13 '12 at 08:17
You should check event for propertychange and when it changes submit the first form into iframe. — Arkadiusz 'flies' Rzadkowolski, Jul 13 '12 at 08:19

score 1 · Answer 1 · edited May 23 '17 at 11:48

1

Looks like cloneNode has allowed to clone file inputs. Possible code may be as follows:

<form name="form1">
  <input id="file1" type="file" onchange="copy_file_input()" />
</form>
<form name="form2" enctype="multipart/form-data">
  <input type="hidden" name="test" value="form2sent" />
</form>

function copy_file_input() {
  var target_form = document.forms.form2;
  if (target_form.file2 != undefined) {
    target_form.removeChild(target_form.file2);
  }
  var elem = document.getElementById('file1');
  var copy = elem.cloneNode(true);
  copy.name = 'file2';
  target_form.appendChild(copy);
}

Also this link may be useful.

edited May 23 '17 at 11:48

Community

1
1

answered Jul 13 '12 at 08:37

Stano

8,749
6
30
44

Hi i did the same its working but server side i am not receiving any data. – saravanan shanmugavel Jul 13 '12 at 09:30
@saravananshanmugavel You are right, I tested it and it couldn't make a copy of selected file. Can you try if this update will work? – Stano Jul 13 '12 at 18:19

copy html input file element from one form to another

1 Answers1