Programatically added file inputs with value are empty

Question

I prefill file inputs value then append them to a div. When I try check for their value later on (onsubmit) their value returns empty even though inspecting the element there is a value set.

Visually the inputs show no value?

Please see snippet below for demonstration:

function addfile() {
  $('#fileupload').append('<input type="file" checkme="checkme" name="file[]" value="C:fakepath/hello.jpg" />');
}

function test() {
  $('input,textarea,select').filter('[checkme]:visible').each(function() {
    alert($(this).val());
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fileupload">
  <input type="text" checkme="checkme" value="hello" />
</div>
<button onclick="addfile()">
  Add File
</button>
<button onclick="test()">
  Test
</button>

I don't think this is possible since it would pose a serious security concern — AndFisher, Dec 13 '16 at 08:53
You can add the file input, but you cannot specify a file location. This is a security restriction in place on all browser. There is no alternative. — Rory McCrossan, Dec 13 '16 at 08:54
Thanks @Satpal confirming now that HTML wants the user to select a file from their computer and therefore you cannot dynamically set its value. — Andrew, Dec 13 '16 at 08:55

score 1 · Answer 1 · answered Dec 13 '16 at 08:54

1

I don't think this is possible since it would pose a serious security concern.

You may get the filename depending on support but exposing the path on a user's machine is very dangerous.

answered Dec 13 '16 at 08:54

AndFisher

633
1
5
18

Programatically added file inputs with value are empty

1 Answers1