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
– Piotr Kowalski, Commented Dec 9, 2019 at 14:57
@PiotrKowalski Great snippet but I would suggest to use let over var. For more information about the differences between them see stackoverflow.com/questions/762011/… — Alexander Behling
– Alexander Behling, Commented Jun 3, 2022 at 9:17

Patrick Evans · Accepted Answer · 2016-05-19 06:24:32Z

264

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, 2016 at 6:24

answered Sep 11, 2014 at 17:45

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

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

2 Comments

Pathros Over a year ago

( document.getElementById("videoUploadFile").files.length === 0 )

nssmart Over a year ago

See no purpose in third = sign here, except for IDE checks.

Salim · Accepted Answer · 2015-07-09 15:22:36Z

201

Here is the jQuery version of it:

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

answered Jul 9, 2015 at 15:22

Salim

2,5461 gold badge17 silver badges12 bronze badges

2 Comments

Hussain Akbar Over a year ago

This answer is more appropriate as the OP asked for a JQuery solution.

zanderwar Over a year ago

$('#videoUploadFile').get(0) same as $('#videoUploadFile')[0] but perhaps get() does some sanity checks

Mamun · Accepted Answer · 2018-04-24 05:02:47Z

29

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, 2018 at 5:02

answered Oct 24, 2017 at 7:05

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

Joel Youngberg · Accepted Answer · 2020-01-16 00:47:41Z

10

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');
  }

}

answered Jan 16, 2020 at 0:47

Joel Youngberg

5601 gold badge9 silver badges12 bronze badges

Comments

kurdtpage · Accepted Answer · 2023-05-13 09:59:56Z

7

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, 2023 at 9:59

kurdtpage

3,2631 gold badge26 silver badges24 bronze badges

answered Apr 18, 2017 at 7:56

Adnan Limdiwala

1971 silver badge2 bronze badges

4 Comments

Josh Burgess Over a year ago

Further explanation on why this would work or what was wrong in the original question would help raise the quality of this answer.

Adnan Limdiwala Over a year ago

@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 .

Eduard Luca Over a year ago

@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.

Josh Burgess Over a year ago

@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.

sean comor · Accepted Answer · 2020-10-16 11:00:51Z

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, 2020 at 11:00

sean comor

694 bronze badges

1 Comment

AbdurrahmanY Over a year ago

I think you should add some comments on your post.

Nick is tired · Accepted Answer · 2022-01-31 07:33:30Z

3

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

edited Jan 31, 2022 at 7:33

Nick is tired

7,17721 gold badges44 silver badges55 bronze badges

answered Jan 26, 2022 at 2:22

Muhammad Lazuardi Imani

312 bronze badges

Collectives™ on Stack Overflow

How to check if input file is empty in jQuery

7 Answers 7

2 Comments

2 Comments

Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

Comments

Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related