Set input file value to second input file

Question

Note:

The answers & comments below reflect the state of legacy browsers in 2009. Now you can actually set the value of the file input element dynamically/programatically using JavaScript in 2017.

See the answer in this question for details as well as a demo:
How to set file input value programatically (i.e.: when drag-dropping files)?

I have 2 input type="file"

<input type="file" id="attach_file_1" name="attach_file_1" />
<input type="file" id="attach_file_2" name="attach_file_2" />

after "choosing" file for attach_file_1, there is possible to set same value for attach_file_2 using javascript ?

Any reason why you want to do this? You'd just be uploading the same file twice... — Ian, May 28 '13 at 13:59
I'm pretty sure the answers below are correct, but I'd be curious to know what `input.cloneNode()` would do. — , May 28 '13 at 14:00
@squint The Clone doesn't copy the file information. http://jsbin.com/uramuw/1/ — U.P, May 28 '13 at 14:07

score 10 · Answer 1 · answered May 28 '13 at 13:58

10

I don't think you can. I believe it's a security issue. You can't set the value of a file input type. Otherwise you could hide the file input element and upload a file to your server without the user's knowledge.

answered May 28 '13 at 13:58

Travesty3

14,351
6
61
98

1

I'm not certain would it be a security issue to use the same file that the client has already provided. – May 28 '13 at 14:01
@squint: No, that specific case wouldn't be a security issue. But that is the reason you can't set it with JS. – Travesty3 May 28 '13 at 14:03
Well, OP is asking about that specific case. – May 28 '13 at 14:10
I'd tend to agree, browsers are very paranoid when it implies files. I don't think it's even possible to clone a file input because it requires it to be filled without the user can notice it. Also, it could be misleading if used in some kind of ad-systems. Let think that for a free web service, you upload files and they are also received by an annoying advertisement that send you products that have similar images. – Frederik.L May 28 '13 at 14:16

U.P · Answer 2 · 2013-05-28T14:31:41.887

2

One way of achieving the desired functionality is to add a flag in form and mark it true when you want to copy the file information to second input. Then, on the server, you can check for that flag and use the file from first input to do whatever you wish to do with the second input.

edited May 28 '13 at 14:31

answered May 28 '13 at 14:09

U.P

7,357
7
39
61

score 1 · Answer 3 · 2013-05-28T14:20:09.077

1

Given that you want another input with the same value, it does appear to be possible using .cloneNode(), at least in Firefox. So far, Chrome behaves differently.

http://jsbin.com/ohafom/2/

Also note that I haven't actually tested the upload. As far as I know, Firefox will only send one. Still interesting that the clone worked.

edited May 28 '13 at 14:20

answered May 28 '13 at 14:10

Appears to be working in Firefox, not in Chrome or IE10 – U.P May 28 '13 at 14:14
Great answer, but very sadly that not works in chrome and in safari – Oto Shavadze May 28 '13 at 14:17
@UmairP: Yeah, that's the result I'm getting too. I haven't actually tried the upload yet, so I'm not sure that there'll be two at that point. Really have no idea what OP wants here. – May 28 '13 at 14:18
@OTARIKI: Could you describe why you need this? – May 28 '13 at 14:18
@squint I need this for "sorting without gaps", for example given 3 input files, then, if remove second input value, I need set third value to second. (and remove third value) – Oto Shavadze May 28 '13 at 14:26
1

@OTARIKI: You can't just relocate the two input nodes instead of changing their values? – May 28 '13 at 14:29
@squint `just relocate the two input nodes` how? after removing second input, when send request on server, result will be empty for `attach_file_2`, but not empty for `attach_file_3` right? I need prevent this – Oto Shavadze May 28 '13 at 14:35
1

@OTARIKI: If you're saying because of the names, then just change the name instead of the value. So if `file_1` and `file_3` have values, but `file_2` does not, then just swap the names of the two. You could also swap the positions if this is happening while the user is filling out the form, for some visual representation. – May 28 '13 at 14:39
@squint I can't change input names, because... very long story :) Thank you, Thanks everyone for help. – Oto Shavadze May 28 '13 at 14:47

Frederik.L · Answer 4 · 2013-05-28T14:47:31.397

0

The only way I can figure out to achieve that (but works only to "pass" the file from one to another) is to dynamically switch the input field position and names so that the file looks like it have passed from one to another.

Otherwise, it's security issue, most browsers won't let you manipulate file inputs at all.

edited May 28 '13 at 14:47

answered May 28 '13 at 14:27

Frederik.L

5,522
2
29
41

Set input file value to second input file

4 Answers4

Linked