Trigger file selection upon focusing text input

Question

So currently my site consists of a text input field, and I want a file browser to trigger as soon as I focus on it. The user then chooses a file, puts text in the textinput, then presses submit to upload.

My current HTML:

<input type="text" placeholder="upload" class="card" id="upload">
<br>
<div class="enter" id="submit-upload">upload</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

The problem is that I can't find a way to fire the file browser up. I've tried quite a lot of ways, ranging from .click() to s, putting the textinput inside the form, and many ways of hiding the fileinput.

But I just can't seem to trigger the file input at all.

Is this a browser/security thing? Because all I can find that isn't blocked by security features is overlaying the button over the textinput, which doesn't really work in my case.

Any clue?

It is a browser security thing. Since loading file select dialog is a system-level call, you aren't allowed to invoke it through JavaScript. You could use a flash/ajax file uploader library instead, which should give you what you need (and more). — The Maniac, Mar 24 '16 at 22:28

score 0 · Answer 1 · answered Mar 24 '16 at 22:30

0

Use HTMLElement.click()

$("#upload").focus(function() {
  $("#fileToUpload")[0].click()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" placeholder="upload" class="card" id="upload">
<br>
<div class="enter" id="submit-upload">upload</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

answered Mar 24 '16 at 22:30

guest271314

1
15
104
177

Hmm, this seems to work in Chrome, but not in Firefox... (same goes for the answer by @gaemaf) – none Mar 25 '16 at 12:44
Try substituting `click` event for `focus` event , see http://stackoverflow.com/questions/29728705/trigger-click-on-input-file-on-asynchronous-ajax-done – guest271314 Mar 25 '16 at 12:48

gaetanoM · Answer 2 · 2016-03-24T22:37:54.850

My proposal is:

In pure javascript:

window.onload = function() {
  document.getElementById('upload').addEventListener('focus',function(e) {
    document.getElementById('fileToUpload').click();
  }, false);
}

<input type="text" placeholder="upload" class="card" id="upload">
<br>
<div class="enter" id="submit-upload">upload</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

In jQuery:

$(function () {
  $('#upload').on('focus', function(e) {
    $('#fileToUpload').click();
  });
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<input type="text" placeholder="upload" class="card" id="upload">
<br>
<div class="enter" id="submit-upload">upload</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

Trigger file selection upon focusing text input

2 Answers2