Determine whether the uploader has input file in EJ2 TypeScript 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.
import { detach, createElement } from '@syncfusion/ej2-base';
import { FormValidator, Uploader } from '@syncfusion/ej2-inputs';
import { Dialog } from '@syncfusion/ej2-popups';
let dropElement = document.getElementsByClassName('dropUpload')[0];
// Initialize the uploader component
let uploadObj: Uploader = new Uploader({
autoUpload: false,
selected: onFileSelect,
allowedExtensions: 'image/*',
multiple: true,
dropArea: dropElement,
});
uploadObj.appendTo('#fileupload');
document.getElementById('customBrowse').onclick = () => {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
};
function onFileSelect(args: any): void {
if (args.filesData.length > 0) {
if (document.getElementsByClassName('upload-image').length > 0) {
detach(document.getElementsByClassName('imgWrapper')[0]);
}
let imageTag = createElement('IMG', { className: 'upload-image', attrs: { 'alt': 'Image' } });
let wrapper: HTMLElement = createElement('span', { className: 'imgWrapper' }) as HTMLElement;
wrapper.appendChild(imageTag);
let rootFile = document.getElementsByClassName('dropUpload')[0];
rootFile.insertBefore(wrapper, rootFile.firstChild);
readURL(wrapper, args.filesData[0]);
}
args.cancel = true;
}
function readURL(li: HTMLElement, args: any): void {
let preview: HTMLImageElement = li.querySelector('.upload-image');
let file: File = args.rawFile; let reader: FileReader = new FileReader();
reader.addEventListener('load', () => { preview.src = reader.result; }, false);
if (file) { reader.readAsDataURL(file); }
}
let options = {};
let formObj: FormValidator = new FormValidator('#form1', options);
function onFormSubmit(): void {
let formStatus: Boolean = formObj.validate();
if (formStatus) {
formObj.element.reset();
detach(document.getElementsByClassName('imgWrapper')[0]);
confirm.show();
}
}
let confirm: Dialog = new 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').onclick = () => {
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/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<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>
</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.