how to check if a file is selected using javascript?

Question

In php this is how you would check if a file is selected:

$_FILES['item']['size']>0

what about in JavaScript?

I need to know because I have a function that will only work if a file is selected.

score 21 · Accepted Answer · answered Sep 13 '09 at 11:14

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-49531485 says:

value of type DOMString
When the type attribute of the element has the value "text", "file" or "password", this represents the current contents of the corresponding form control, in an interactive user agent.

<html>
  <head><title>...</title>
    <script type="text/javascript">
      function foo() {
        var f = document.getElementById("f1");
        alert( ""==f.value ? "nothing selected" : "file selected");
      }
    </script>
  </head>
  <body>
    <form>
      <div>
        <input id ="f1" type="file" name="x" />
      </div>
    </form>
    <button onclick="foo()">click</button>
  </body>
</html>

Here (https://jsfiddle.net/mitma/ra6fv8kc/) a revised proposed demo, but I don't understand a strange behavior that I'm trying to solve, that brought me here: if I execute the code from a mobile device, the multiple selection turns out to be ONE, while from the computer no ... There seems to be a different trigger between the (multiple) selection made with the mouse and the one made with the touch on a mobile device... I opened a topic here: https://stackoverflow.com/q/56476753/2149425 — Riccardo Volpe, Jun 06 '19 at 11:38

score 8 · Answer 2 · answered Feb 02 '11 at 14:56

8

I use this javascript:

var file_selected = false;
function showNoFile() {
    if(!file_selected) { alert('No file selected!'); } // or anything else
}

with this html for the file button:

<input type='file' onchange="file_selected = true;" ...>
....
<input type='submit' onclick='showNoFile();'>

hope that helps!

answered Feb 02 '11 at 14:56

Tanner Ottinger

2,970
4
22
28

I think this is the best answer. If you want to do like an AJAX request when someone chooses a file the `onchange` function is what you want. If you simply use `onclick` it fires once the choose file dialog is opened, but before a file is chosen. – The Muffin Man Jan 19 '13 at 21:14
1

it doesn't work in chrome... if you choose a file then you choose no file again the file_selected remains true which is incorrect. – Stefan P. Dec 11 '14 at 15:08

score 0 · Answer 3 · edited May 23 '17 at 11:50

So lets say you have some html form and you have a custom file upload input:

<label for="imageUploadButton">
<span class="btn" style="padding-left: 10px;">Click here for uploading a new picture</span>
</label> 
<input type="file" name="avatar_picture" accept="image/gif,image/jpeg,image/png" id="imageUploadButton" style="visibility: hidden; position: absolute;">

And you want to check the filename of the file the user has chosen/selected:

Using jquery

<script type="text/javascript">
  $(function() {
     $("input:file").change(function (){
       var fileName = $(this).val();
       alert(fileName); //Do with the filename whatever you want
     });
  });
</script>

@https://stackoverflow.com/a/5670938/2979938

For those using requireJS:

$("input:file").change(function () {
  var fileName = $(this).val();
  alert(fileName); //Do with the filename whatever you want
});

how to check if a file is selected using javascript?

3 Answers3

Linked