How to check if input file is empty in jQuery
JavascriptJqueryHtmlJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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");
}
Solution 2 - Javascript
Here is the jQuery version of it:
if ($('#videoUploadFile').get(0).files.length === 0) {
console.log("No files selected.");
}
Solution 3 - Javascript
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.");
}
Solution 4 - Javascript
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');
}
}
Solution 5 - Javascript
Questions : how to check File is empty or not?
Ans: I have slove this issue using this Jquery code
//If your file Is Empty :
if (jQuery('#videoUploadFile').val() == '') {
$('#message').html("Please Attach File");
}else {
alert('not work');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="videoUploadFile">
<br>
<br>
<div id="message"></div>
Solution 6 - Javascript
$("#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');
}
});
Solution 7 - Javascript
if (data.name == '') {
//file doesn't exist;
}
else {
//file exist;
}