How to check if ASP.NET Core File Upload has an input file
24 Aug 202613 minutes to read
You can validate whether the file input has a value by setting the required attribute on the uploader input element.
The following sample sets the required attribute on the uploader input element and shows the validation error message using the data-required-message attribute.
@{
var Modalanimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect = Syncfusion.EJ2.Popups.DialogEffect.Zoom };
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" };
}
<div class="col-lg-8 control-section">
<div class="control_wrapper">
<div class="col-lg-12 control-section">
<h4 class="form-title">Photo Contest</h4>
<div class="control_wrapper" id="control_wrapper">
<form id="form1" method="post">
<div class="form-group" style="padding-top: 40px; float: left">
<div class="e-float-input">
<input type="text" id="name" name="name" data-required-message="* Enter your name" required="" data-msg-containerid="nameError">
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="name">Name</label>
</div>
<div id="nameError"></div>
</div>
<div id="dropArea">
<div id="uploadError" style='float: right;'></div>
<div id='customBrowse' class="form-group dropUpload">
Drop image here...
<ejs-uploader id="UploadFiles" dropArea=".dropUpload" allowedExtensions="image/*" selected="onFileSelect" asyncSettings="@asyncSettings" multiple="true" autoUpload="false"></ejs-uploader>
</div>
</div>
<div class="submitBtn">
<button type="button" class="submit-btn e-btn" id="submit-btn">Submit</button>
<div class="desc"><span>*This button is not a submit type and the form submit handled from externally.</span></div>
</div>
</form>
<ejs-dialog id="confirmationDialog" header="Success" showCloseIcon="true" width="335px" visible="false" content="Your details have been updated successfully, Thank you." target="#control_wrapper" isModal="true" animationSettings="@Modalanimation">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.button" click="closeDialog"></e-dialog-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
</div>
</div>
</div>
</div>
<script>
var formID, confirm;
window.onload = function () {
inputElement = document.getElementById('upload');
formID = document.getElementById('form1');
confirm = document.getElementById("confirmationDialog").ej2_instances[0];
formObj = new ej.inputs.FormValidator(formID, options);
document.getElementById('customBrowse').onclick = () => {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
};
document.getElementById('submit-btn').onclick = () => {
onFormSubmit();
};
}
var options = {
customPlacement: function (inputElement, errorElement) {
inputElement = inputElement.closest('.form-group').querySelector('.error');
inputElement.parentElement.appendChild(errorElement);
},
rules: {
'name': {
required: true
}
}
};
function onFileSelect(args) {
if (args.filesData.length > 0) {
if (document.getElementsByClassName('upload-image').length > 0) {
detach(document.getElementsByClassName('imgWrapper')[0]);
}
var imageTag = ej.base.createElement('IMG', { className: 'upload-image', attrs: { 'alt': 'Image' } });
var wrapper = ej.base.createElement('span', { className: 'imgWrapper' });
wrapper.appendChild(imageTag);
var rootFile = document.getElementsByClassName('dropUpload')[0];
rootFile.insertBefore(wrapper, rootFile.firstChild);
readURL(wrapper, args.filesData[0]);
}
args.cancel = true;
}
function readURL(li, args) {
var preview = li.querySelector('.upload-image');
var file = args.rawFile;
var reader = new FileReader();
reader.addEventListener('load', () => { preview.src = reader.result; }, false);
if (file) { reader.readAsDataURL(file); }
}
var options = {};
formID = document.getElementById('form1');
var formObj = new ej.inputs.FormValidator(formID, options);
function onFormSubmit() {
var formStatus = formObj.validate();
if (formStatus) {
formObj.element.reset();
ej.base.detach(document.getElementsByClassName('imgWrapper')[0]);
confirm.show();
}
document.querySelector('#UploadFiles').setAttribute('data-required-message', '* Choose your image to upload');
document.querySelector('#UploadFiles').setAttribute('required', '');
document.querySelector('#UploadFiles').setAttribute('data-msg-containerid', 'uploadError');
}
function closeDialog() {
confirm.hide();
}
</script>.control_wrapper {
max-width: 400px;
margin: auto;
}
.control_wrapper .e-upload .e-upload-drag-hover {
margin: 0;
}
.address-field {
resize: none;
}
#dropArea .dropUpload .upload-image {
height: 140px;
width: 140px;
}
#dropArea .dropUpload {
float: right;
text-align: center;
vertical-align: middle;
line-height: 12;
overflow: hidden;
border: 1px dashed;
width: 150px;
height: 150px;
}
.e-upload {
visibility: hidden;
}
#control_wrapper {
max-width: 500px;
margin: auto;
border: 0.5px solid #BEBEBE;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
padding: 1% 4% 7%;
background: #f9f9f9;
}
.e-error {
padding-top:3px;
}
.control_wrapper .e-upload .e-upload-drag-hover {
margin: 0;
}
.submit-btn {
margin-top: 15px;
margin: auto 100px;
}
.submitBtn .desc {
margin: 2% 23% 0 18%;
}
.submitBtn {
text-align: center;
}
.form-support {
width: 100%;
}
.success .form-support {
display: none;
}
.success .successmsg {
border: 0.5px solid green;
padding: 10%;
color: green;
}
#form1 {
position: relative;
top: 14%;
}
.form-support td {
width: 100%;
padding-top:4%;
}
.e-upload {
float: none;
}
.choose-file{
width: 60%;
}
#browse {
float: right;
margin-right: -113px;
margin-top: -27px;
}
.form-title {
text-align: center;
}Explore the ASP.NET Core File Upload feature tour page to discover its groundbreaking features. You can also check out our ASP.NET Core File Upload example to see how to browse and select files for upload to the server.