The Uploader control 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.
@{
var modalAnimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect = Syncfusion.EJ2.Popups.DialogEffect.Zoom };
}
<div class="col-lg-12 control-section" id="control-fluid">
<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="* Please enter valid 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" id="mobile-no">
<input type="text" id="mobileno" name="mobile" 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="mobile">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" readonly name="upload" data-required-message="* Select any file" required="" data-msg-containerid="uploadError">
<button id="browse" type="button" class="e-control e-btn e-info" onclick="browseClick()">Browse...</button>
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="upload">Choose a file</label>
</div>
<div id="uploadError"></div>
<ejs-uploader id="fileupload" autoUpload="false" selected="onFileSelect" multiple="false" allowedExtensions="image/*"> </ejs-uploader>
</div>
<div class="form-group" style="padding-top: 11px;">
<div class="e-float-input">
<textarea class="address-field" rows="2" id="Address"></textarea>
<span class="e-float-line"></span>
<label class="e-float-text e-label-top">Address</label>
</div>
</div>
</form>
<div class="submitBtn">
<button class="submit-btn e-btn" id="submit-btn" onclick="onFormSubmit()">Submit</button>
<div class="desc"><span>*This button is not a submit type and the form submit handled from externally.</span></div>
</div>
<ejs-dialog id="confirmationDialog" header="Success" showCloseIcon="true" width="335px" visible="false" content="Your details have been updated successfully, Thank you." target="#control-fluid" isModal="true" animationSettings="modalAnimation"></ejs-dialog>
</div>
</div>
<script>
function onFileSelect(args) {
var inputElement = document.getElementById('upload');
inputElement.value = args.filesData[0].name;
}
var options = {
customPlacement: function (inputElement, errorElement) {
inputElement = inputElement.closest('.form-group').querySelector('.error');
inputElement.parentElement.appendChild(errorElement);
},
rules: {
'name': {
required: true
},
'email': {
required: true
},
'upload': {
required: true
},
'mobile': {
required: true
}
}
};
var inputElement = document.getElementById('upload');
var formID = document.getElementById('form1');
var formObj = new ej.inputs.FormValidator(formID, options);
function onFormSubmit() {
var confirm = document.getElementById("confirmationDialog").ej2_instances[0];
var formStatus = formObj.validate();
if (formStatus) {
formObj.element.reset();
confirm.show();
}
}
function browseClick() {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
return false;
};
</script>using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace EJ2CoreSampleBrowser.Controllers.TextBoxes
{
public partial class UploaderController : Controller
{
public ActionResult DefaultFunctionalities()
{
return View();
}
}
}.control_wrapper {
max-width: 400px;
margin: auto;
}
#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% 2%;
background: #f9f9f9;
}
.upload-area {
width: 73%;
}
.e-bigger .upload-area {
width: 68%;
}
.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 .desc {
margin: 2% 23% 0% 18%;
}
@media only screen and (max-width: 500px) {
.submitBtn .desc {
margin: 12px;
}
.upload-area, .e-bigger .upload-area {
width: 60%;
}
}
.submitBtn {
position: relative;
text-align: center;
}
.form-support {
width: 100%;
}
.success .form-support {
display: none;
}
.success .successmsg {
border: 0.5px solid green;
padding: 10%;
color: green;
}
form#form1 {
position: relative;
top: 14%;
}
.form-support td {
width: 100%;
padding-top: 4%;
}
.e-upload {
display: none;
}
input.choose-file {
width: 60%;
}
#mobile-no input[type=number]::-webkit-inner-spin-button,
#mobile-no input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
button#browse {
float: right;
position: relative;
margin-right: -113px;
margin-top: -27px;
}
@media only screen and (max-width: 600px) {
.submitBtn {
margin-top: -22px;
}
}
.material button#browse {
margin-right: -117px;
}
.form-title {
text-align: center;
}