If condition is being met when it should not be

I am running an if-statement to check if a file upload input is not empty. I am checking the fileNameVal with the following code if (fileNameVal != null) {. It seems to be always running true when it should not if a file input does not have anything within it.

The fileShow.text() code line is always displaying.

If you need to see this live, visit here.

Does anyone see what I am doing wrong?

var fileShow = $('#fileUploadMessage');
fileShow.hide();
var fileNameVal = '';

$('#uploadedFileTest').change(function () {
    fileNameVal = $('#uploadedFileTest').val();
    console.log(fileNameVal);
});


$("form#submit").submit(function (e) {
    $.LoadingOverlay("show");
     if (fileNameVal != null) {
        fileShow.text('Please wait while your file uploads.');
        fileShow.show();
    }
});

CSS

#fileUploadMessage {
    position: fixed;
    bottom: 20vh;
    left: 50%;
    -webkit-transform: translateX(-50%);transform: translateX(-50%);
    color: #000;
    font-size: 3rem;
    font-family: 'Muli', sans-serif;
    letter-spacing: .2rem;
    text-align: center;
    display: block;
    z-index: 9999999999999999999999999999999999999;
}

HTML

<form action="" method="POST" id="submit">
    <input id="first_name" type="text">
    <input type="file" name="uploadedFile" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
    <p id="fileStatus">Upload File</p>
    <button type="submit">SEND</button>
</form>
<p id="fileUploadMessage"></p>