file input type being used to select a file and then move the data to a form with the approperiate file input tag

Question

I have an iframe which will have an input tag that allows you to browse for the file you are wanting to upload.

What i was then doing was creating a new input type = "file" tag in my hidden form data which would be populated with the src of the file.

At the end of everything there is a button the users can use to submit the actual form.

The submitted form, will have the file, but it would be empty. I was thinking there might be some underlying event going on that i didnt know about. When reading up on it, i also had noticed that if the source is wrong, it will just send an empty file.

How is this done correct?

Update: When looking at the data,the dom element input:file has an attribute called files which is the attribute i want to move to the new item. My fiddle is: http://jsfiddle.net/4vNXv/

I cant seem to get new data to move over from the old input to the new input.

Edit: I was thinking that jQuery might be able to maintain data by copying the whole object. via the $(this).clone() command, but that was not working either.

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

Editing the file form field is a security risk and thus is disabled on most browsers.

See Clone a file input element in Javascript

In your scenario, I believe you could create two forms (one in the iframe) and submit both on the button request.

See Submit two forms with one button

edited May 23 '17 at 12:21

Community

1
1

answered Sep 10 '12 at 13:59

kampsj

3,139
5
34
56

the initial input where information is being set is actually not in a form at all. It is used and designed in a way to have 1 set of stuff be attributes, which manipulate data in an iframe. It is a useful tool to submit 2 forms with 1 button though – Fallenreaper Sep 10 '12 at 14:30

score 0 · Accepted Answer · edited May 23 '17 at 11:55

The key question mentioned here is the Title which says MOVE. Moving data around by moving the entire element should not have issues of security risk occurances. The reasoning behind this is that nothing is being created or modified. The input is remaining intact, but it just moved from 1 area to another.

To accomplish this workaround, you should do the following:

1.  clone the object.  This will leave a placeholder there, so it doesnt look like anything moved.
2.  use appendTo to append it to the new form.

Sample below I had used:

$item = $(this);
$clone = $(this).clone();
$item.after($clone).appendTo("#newForm");

This work around created the new object, but because it is not thing thing being moved or changed, you will not need to worry about the contents being shuffled around for a security risk. The original is selected and moved from its current location to its new location, in #newForm.

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

file input type being used to select a file and then move the data to a form with the approperiate file input tag

2 Answers2