How to check if input file is empty in jQuery

Question

Brand new to JS.
I am trying to check if the file input element is empty when submitting the form with jQuery/JavaScript. I have gone through a bunch of solutions and nothing is working for me. I am trying to avoid the /c/fakepath (unless there is no other option)

<input type="file" name="videoFile" id="videoUploadFile" />

This does not work:

var vidFile = $("#videoUploadFile").value;

The only way I can get the filename is if I use the following:

var vidFile = document.getElementById("videoUploadFile").files[0].name;

If there is no file available the code throws an error:

cannot read property name of undefined

which makes sense because the array is not set. but I cannot figure out how to do any error handling with this.

How do I properly grab the file input element videoUploadFile, check if it's empty, throw an error message if it's empty?

you can also filter non-empty files if you have more than one on the form: ```var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });``` — Piotr Kowalski, Dec 09 '19 at 14:57
@PiotrKowalski Great snippet but I would suggest to use let over var. For more information about the differences between them see https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var — Alexander Behling, Jun 03 '22 at 09:17

Patrick Evans · Accepted Answer · 2016-05-19T06:24:32.083

259

Just check the length of files property, which is a FileList object contained on the input element

if( document.getElementById("videoUploadFile").files.length == 0 ){
    console.log("no files selected");
}

edited May 19 '16 at 06:24

answered Sep 11 '14 at 17:45

Patrick Evans

41,991
6
74
87

1

`( document.getElementById("videoUploadFile").files.length === 0 )` – Pathros Aug 02 '20 at 22:09
See no purpose in third = sign here, except for IDE checks. – nssmart May 05 '22 at 06:59

score 193 · Answer 2 · answered Jul 09 '15 at 15:22

193

Here is the jQuery version of it:

if ($('#videoUploadFile').get(0).files.length === 0) {
    console.log("No files selected.");
}

answered Jul 09 '15 at 15:22

Salim

2,446
1
14
12

2

This answer is more appropriate as the OP asked for a JQuery solution. – Hussain Akbar Feb 27 '20 at 16:55
`$('#videoUploadFile').get(0)` same as `$('#videoUploadFile')[0]` but perhaps `get()` does some sanity checks – zanderwar Apr 01 '20 at 03:37

Mamun · Answer 3 · 2018-04-24T05:02:47.810

27

To check whether the input file is empty or not by using the file length property, index should be specified like the following:

var vidFileLength = $("#videoUploadFile")[0].files.length;
if(vidFileLength === 0){
    alert("No file selected.");
}

edited Apr 24 '18 at 05:02

answered Oct 24 '17 at 07:05

Mamun

66,969
9
47
59

score 8 · Answer 4 · answered Jan 16 '20 at 00:47

I know I'm late to the party but I thought I'd add what I ended up using for this - which is to simply check if the file upload input does not contain a truthy value with the not operator & JQuery like so:

if (!$('#videoUploadFile').val()) {
  alert('Please Upload File');
}

Note that if this is in a form, you may also want to wrap it with the following handler to prevent the form from submitting:

$(document).on("click", ":submit", function (e) {

  if (!$('#videoUploadFile').val()) {
  e.preventDefault();
  alert('Please Upload File');
  }

}

score 5 · Answer 5 · edited May 13 '23 at 09:59

5

Question: How to check File field is empty or not?

Answer: I have solved this issue using this Jquery code

//If your file Is Empty:
if ($('#videoUploadFile').val() == '') {
    $('#message').html("Please Attach File");
} else {
    alert('ok');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="file" id="videoUploadFile">
</form>
<br>
<br>
<div id="message"></div>

edited May 13 '23 at 09:59

kurdtpage

3,142
1
24
24

answered Apr 18 '17 at 07:56

Adnan Limdiwala

177
1
2

1

Further explanation on why this would work or what was wrong in the original question would help raise the quality of this answer. – Josh Burgess Apr 18 '17 at 08:42
@josh burgess this answer was how to check File is empty or not is another way to check your file when you submit form using jquery . – Adnan Limdiwala Apr 19 '17 at 05:53
@JoshBurgess the OP is asking how to do this in jQuery. All other answers either use vanilla JS or a combo of JS and jQuery. This is the only one who uses jQuery exclusively. Maybe I'm picky, but I don't like to mix jQuery with vanilla JS unless I really have to. – Eduard Luca Jun 13 '19 at 10:05
@EduardLuca Answer is over two years old. It was flagged as low quality at the time. An explanation of the code is generally appreciated by the SO community, and the comment was meant as a helpful reminder to not just post code but to explain what the code is and why it works. Hope that helps clear things up. – Josh Burgess Jun 17 '19 at 16:30

score 3 · Answer 6 · answered Oct 16 '20 at 11:00

3

  $("#customFile").change(function() { 
    var fileName = $("#customFile").val();  

    if(fileName) { // returns true if the string is not empty   
        $('.picture-selected').addClass('disable-inputs'); 
        $('#btn').removeClass('disabled');   
    } else { // no file was selected 
      $('.picture-selected').removeClass('disable-inputs'); 
      $('#btn').addClass('disabled');
    }  
  });

answered Oct 16 '20 at 11:00

sean comor

59
4

1

I think you should add some comments on your post. – AbdurrahmanY Oct 16 '20 at 11:36

score 3 · Answer 7 · edited Jan 31 '22 at 07:33

3

if (data.name == '') {
   //file doesn't exist;
}
else {
   //file exist;
}

edited Jan 31 '22 at 07:33

Nick is tired

6,860
20
39
51

answered Jan 26 '22 at 02:22

Muhammad Lazuardi Imani

31
2

How to check if input file is empty in jQuery

7 Answers7

Linked

Related