How to detect uploader files in EJ2 TypeScript File Upload
08 Sep 202613 minutes to read
By setting the required attribute on the Uploader input element, you can validate whether the input file has a value. The required attribute can be applied through the htmlAttributes property, and the validation is triggered when the Uploader is used within a form or with the FormValidator. In the following sample, the required attribute is set on the Uploader input element and the validation failure message is shown 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/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.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>
</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.