jQuery, Select Input FILE and also set it to another INPUT

Question

The website has 2 input fields, I only select 1 field and the other one is invisible. Now I want to change the .val() of the invisible one to the .val() of the selected one, so both fields upload the same file. How does that work?

If I do this:

    $('#input_file').change(function() {
        var fileSelect = $(this).val();
        $('#hidden_input_file"]').val(fileSelect);
        console.log(fileSelect);
    });

I get this error: Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

John Weisz · Accepted Answer · 2017-11-14 11:18:10Z

27

Your code is almost correct:

$('#hidden_input_file').val(fileSelect);

This will make jQuery change the value of an input. However, the value of input type="file" can never* be changed with JavaScript (nor Flash, nor any means programmatically). This is a security feature implemented in all end-user browsers to prevent websites from a trivial mischievery:

$('#hidden_input_file').on('blur', function (e) {
    $('#hidden_input_file').val('c:\passwords.txt'); // won't work
});

Enabling the programmatical change of a file URL that is to be uploaded from a user's computer would be a monstrous security issue.

*only applies to JavaScript on the web

edited Nov 14, 2017 at 11:18

answered Apr 18, 2015 at 18:14

John Weisz

32.1k14 gold badges97 silver badges138 bronze badges

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

Comments

user2531010 · Accepted Answer · 2022-04-01 13:27:09Z

0

You can do it by waiting for the on change event of the original input

$("#Original").on("change", function (event) {
   let fileInputElement = document.getElementById('Picture');
   fileInputElement.files = event.target.files;
});

answered Apr 1, 2022 at 13:27

user2531010

1

Collectives™ on Stack Overflow

jQuery, Select Input FILE and also set it to another INPUT

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related