Search results

Forms Support (Synchronous Upload)

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.

tagHelper
formsupport.cs
index.css
@using Syncfusion.EJ2

@{
     var Modalanimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect = Syncfusion.EJ2.Popups.DialogEffect.Zoom };
}

@section ControlsSection{
    <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" 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>
            <ejs-dialog id="confirmationDialog" width="335px" visible="false" content="Your details has been updated successfully, Thank you" target=".control-fluid" isModal="true" animationSettings="@Modalanimation"></ejs-dialog>
        </div>
    </div>
}

<link href="~/css/uploader/forms.css" rel="stylesheet" />

@section PreScripts {
    <script>
        window.onload = function () {

            var confirm = document.getElementById("confirmationDialog").ej2_instances[0];
            confirm.visible = false;
        }

        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();
            }
            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 IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}
.control_wrapper {
        max-width: 400px;
        margin: auto;
    }

    #control_wrapper {
        max-width: 440px;
        margin: auto;
        border: 0.5px solid grey;
        padding: 1% 4% 2%;
        background: #f9f9f9;
    }
/* csslint ignore:start */
    .bootstrap label.e-float-text.e-label-top {
        font-weight: bold;
    }
/* csslint ignore:end */
    .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;
        top: -26px
    }

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

    .fabric #browse, .highcontrast #browse {
        top: -32px;
    }
    /* csslint ignore:end */

    .bootstrap #browse {
        top: -34px;
    }

    .form-title {
        text-align: center;
    }