Determine whether the uploader has input file in EJ2 JavaScript Uploader control
15 May 202313 minutes to read
By setting the required attribute to uploader input element, you can validate the input file that has any value in it. In the following sample, set required attribute to the uploader input element and showcase the validation failure message using the data-required-message attribute.
ej.base.enableRipple(true);
var dropElement = document.getElementsByClassName('dropUpload')[0];
// Initialize the uploader component
var uploadObj = new ej.inputs.Uploader({
autoUpload: false,
selected: onFileSelect,
allowedExtensions: 'image/*',
multiple: true,
dropArea: dropElement,
});
uploadObj.appendTo('#fileupload');
document.getElementById('customBrowse').addEventListener('onclick', function() {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
});
function onFileSelect(args) {
if (args.filesData.length > 0) {
if (document.getElementsByClassName('upload-image').length > 0) {
ej.base.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 = {};
var formObj = new ej.inputs.FormValidator('#form1', options);
function onFormSubmit() {
var formStatus = formObj.validate();
if (formStatus) {
formObj.element.reset();
detach(document.getElementsByClassName('imgWrapper')[0]);
confirm.show();
}
}
var confirm = new ej.popups.Dialog({
width: '335px',
visible: false,
header: 'Success',
content: 'Your details have been updated successfully, Thank you.',
target: document.getElementById('control_wrapper'),
showCloseIcon: true,
isModal: true,
animationSettings: {
effect: 'Zoom'
}
});
confirm.appendTo('#confirmationDialog');
document.getElementById('submit-btn').addEventListener('onclick', function() {
onFormSubmit();
});<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Uploader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Uploader Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<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...
<input type="file" name="UploadFiles" id="fileupload" data-required-message="* Choose your image to upload" required="" data-msg-containerid="uploadError">
</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>
<div id="confirmationDialog"></div>
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>#container {
visibility: hidden;
margin: 0 auto;
width: 400px;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.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;
}You can also explore JavaScript File Upload feature tour page for its groundbreaking features. You can also explore our JavaScript File Upload example to understand how to browse the files which you want to upload to the server.