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.