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.

Source
Preview
app.ts
index.html
index.css
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;
}