The Uploader component works with HTML form like default file input. The following configuration is must to make the Uploader work inside the form.
* `saveUrl` and `removeUrl` must be null.
* `autoUpload` must be disabled.
* `name` attribute must be added in input element.The selected or dropped files are received as a collection in form action when the form is submitted. The form action handles the server-side operations that manage the file upload process. When you reset the form, the file list and data will be cleared.
import { FormValidator } from '@syncfusion/ej2-inputs';
import { Uploader } from '@syncfusion/ej2-inputs';
import { Dialog } from '@syncfusion/ej2-popups';
/**
* Uploader form support sample
*/
let dropElement: HTMLElement = document.getElementsByClassName('control-fluid')[0] as HTMLElement;
// Initialize the uploader component
let uploadObj: Uploader = new Uploader({
autoUpload: false,
selected: onFileSelect,
allowedExtensions: 'image/*',
dropArea: dropElement
});
uploadObj.appendTo('#fileupload');
document.getElementById('browse').onclick = () => {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click(); return false;
};
function onFileSelect(args: any): void {
let inputElement: HTMLInputElement = document.getElementById('upload') as HTMLInputElement;
inputElement.value = args.filesData[0].name;
}
let options: any = {
// Initialize the CustomPlacement.
customPlacement: (inputElement: Element, errorElement: Element) => {
inputElement = inputElement.closest('.form-group').querySelector('.error');
inputElement.parentElement.appendChild(errorElement);
},
rules: {
'Name': {
required: true
},
'Email': {
required: true
},
'upload': {
required: true
}
}
};
let formObj: FormValidator = new FormValidator('#form1', options);
function onFormSubmit(): void {
let formStatus: Boolean = formObj.validate();
if (formStatus) {
formObj.element.reset();
confirm.show();
}
}
let confirm: Dialog = new Dialog({
width: '335px',
visible: false,
content: 'Your details has been updated successfully, Thank you',
target: document.getElementById('control_wrapper'),
isModal: true,
animationSettings: {
effect: 'Zoom'
}
});
confirm.appendTo('#confirmationDialog');
document.getElementById('submit-btn').onclick = () => {
onFormSubmit();
};
confirm.overlayClick = () => {
confirm.hide();
};<!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 Slider Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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">
<!-- Initialize Uploader -->
<form id="form1" method="post">
<div class="form-group" style="padding-top: 11px;">
<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 class="form-group" style="padding-top: 11px;">
<div class="e-float-input">
<input type="email" id="email" name="Email" data-validation="email" data-required-message="* Enter your email" required="" data-msg-containerid="mailError">
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="email">Email</label>
</div>
<div id="mailError"></div>
</div>
<div class="form-group" style="padding-top: 11px;">
<div class="e-float-input">
<input type="text" id="mobileno" name="MobileNo" data-required-message="* Enter your mobile number" required="" data-msg-containerid="noError">
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="mobileno">Mobile No</label>
</div>
<div id="noError"></div>
</div>
<div class="form-group" style="padding-top: 11px;">
<div class="e-float-input upload-area">
<input type="text" id="upload" name="upload" readonly="" data-required-message="* Select any file" required="" data-msg-containerid="uploadError">
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="upload">Choose a file</label>
</div>
<button id="browse" class="e-control e-btn e-info">Browse..</button>
<div id="uploadError"></div>
<input type="file" name="UploadFiles" id="fileupload">
</div>
<div class="form-group" style="padding-top: 11px;">
<div class="e-float-input">
<textarea class="address-field" rows="4" id="Address" name="Address"></textarea>
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="address">Address</label>
</div>
</div>
</form>
<div class="submitBtn">
<button class="submit-btn e-btn" id="submit-btn">Submit</button>
</div>
<div id="confirmationDialog"></div>
</div>
</div>
</div>
</body>
</html>.form-group #upload {
width: 70%;
}
#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%;
}
/* csslint ignore:start */
.e-float-input.upload-area {
width: 69%;
}
/* csslint ignore:end */
.address-field {
max-height: 50px;
}
#control_wrapper {
max-width: 440px;
margin: auto;
border: 0.5px solid grey;
padding: 1% 4% 2%;
background: #f9f9f9;
}
.highcontrast #control_wrapper {
background: #000000;
}
.upload-area, .e-bigger .upload-area {
width: 69%;
}
.e-error {
padding-top:3px;
}
.e-upload {
width: 100%;
position: relative;
margin-top: 15px;
}
.control_wrapper .e-upload .e-upload-drag-hover {
margin: 0;
}
.submit-btn {
margin-top: 15px;
position: relative;
}
.submitBtn {
position: relative;
left: 79%;
}
.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 {
display: none;
}
.choose-file{
width: 60%;
}
#browse {
left: 46%;
float: right;
margin-top: 20px
}
.e-bigger #browse {
top: -41px;
}
/* csslint ignore:start */
.e-bigger.material #browse {
top: -35px;
}
.e-bigger.fabric #browse, .e-bigger.highcontrast #browse {
top: -41px;
left: 50%;
}
/* csslint ignore:end */
.fabric #browse, .highcontrast #browse {
top: -32px;
}
.bootstrap #browse {
top: -34px;
}
.form-title {
text-align: center;
}