Search results

Form Support in ASP.NET MVC Uploader control

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