Hiding one Div and show another with input fields

I have two divs. One is TextDivForUpdation and other is FileDivForUpdation. I am checking in Edit method of Jquery that if Filefield is empty then hide FileDivForUpdation (and only show TextDivForUpdation ) else display only FileDivForUpdation. Although, if condition works but when I try checking else condition, it gives an error in Console

jquery-3.6.0.js:8502 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
    at HTMLInputElement.<anonymous> (https://localhost:44383/Scripts/jquery-3.6.0.js:8502:16)
    at Function.each (https://localhost:44383/Scripts/jquery-3.6.0.js:385:19)
    at jQuery.fn.init.each (https://localhost:44383/Scripts/jquery-3.6.0.js:207:17)
    at jQuery.fn.init.val (https://localhost:44383/Scripts/jquery-3.6.0.js:8472:15)
    at Object.success (https://localhost:44383/Notes/Index/13:291:51)
    at fire (https://localhost:44383/Scripts/jquery-3.6.0.js:3500:31)
    at Object.fireWith [as resolveWith] (https://localhost:44383/Scripts/jquery-3.6.0.js:3630:7)
    at done (https://localhost:44383/Scripts/jquery-3.6.0.js:9796:14)
    at XMLHttpRequest.<anonymous> (https://localhost:44383/Scripts/jquery-3.6.0.js:10057:9)

and it displays both input fields (text input field and file input field) in that modal.
I even tried displaying an Alert in else part but it is not working as well and same error message displays.

My logic: HTML:

@* Text Div For Updation *@
  <div class="row" id="TextDivForUpdation">
    <div class="col-md-3">
      <label class="control-label">Text Description: </label>
    </div>
  <div class="col-md-9">
      <textarea cols="50" rows="12" class=form-control id="TextDescriptionForUpdation" name="TextDescriptionForUpdation" placeholder="Enter Text"></textarea>
    </div>
  </div>
  <br id="textDivBrUpd" />
@* File Div For Updation *@
  <div class="row" id="FileDivForUpdation">
    <div class="col-md-3">
      <label class="control-label">File: </label>
    </div>
    <div class="col-md-9">
      <input class="form-control" type="file" placeholder="Select File" id="fileUpd" name="fileUpd" />
    </div>
  </div>
<br id="fileDivBrUpd" />

jQuery Edit Logic:

//getting data in success method 
$('#noteNameForUpdation').val(result.data.NoteName);                                  $('#TextDescriptionForUpdation').val(result.data.TextDescription);
$('#fileUpd').val(result.data.FilePath);
$('#hiddenInputFieldList').val(result.data.ListId);
$('#hiddenInputFieldNote').val(item);
var fileCheck = document.getElementById("fileUpd").files.length;

//hiding fields / divs
  if (fileCheck === null || fileCheck === "" || fileCheck === 0)
  {
    alert("Hiding File!!!!");
    $('#TextDivForUpdation').show();
    $('#textDivBrUpd').show();
    $('#FileDivForUpdation').hide();
    $('#fileDivBrUpd').hide();
  }
//error comes in else part
  else 
  {
    alert("Not Hiding!!!!");
    $('#TextDivForUpdation').hide();
    $('#textDivBrUpd').hide();
    $('#FileDivForUpdation').show();
    $('#fileDivBrUpd').show();
  }

Based on input type file, I am using if else. Can anyone guide what I am doing wrong.
Screenshot links are also attached below to understand what it looks visually.

https://imgur.com/a/wMvDHhK

https://imgur.com/a/0hCmJrd