Search results

Forms Support (Synchronous Upload)

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.

razor
formsupport.cs
index.css
<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="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" name="upload" readonly 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>
                @Html.EJS().Uploader("fileupload").AutoUpload(false).Selected("onFileSelect").Multiple(false).AllowedExtensions("image/*").Render()
            </div>
            <div class="form-group" style="padding-top: 11px;">
                <div class="e-float-input">
                    <textarea class="address-field" rows="4" 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>
        @Html.EJS().Dialog("confirmationDialog").Width("335px").Visible(false).Content("Your details has been updated successfully, Thank you").Target("#control_wrapper").IsModal(true).AnimationSettings(new Syncfusion.EJ2.Popups.DialogAnimationSettings() { Effect = Syncfusion.EJ2.Popups.DialogEffect.Zoom }).Render()
    </div>
</div>

<script>
    window.onload = function () {
        var confirm = document.getElementById("confirmationDialog").ej2_instances[0];
        confirm.visible = false;
        inputElement = document.getElementById('upload');
        formID = document.getElementById('form1');
        formObj = new ej.inputs.FormValidator(formID, options);
    }

    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
            }
        }
    };

    inputElement = document.getElementById('upload');

    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();
        }
        confirm.overlayClick = function () {
            confirm.hide();
        };
    }

    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;
}