Form Support in JavaScript Uploader control

24 May 2022 / 2 minutes to read

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/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/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;
}

You can also explore JavaScript File Upload feature tour page for its groundbreaking features. You can also explore our JavaScript File Upload example to understand how to browse the files which you want to upload to the server.

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!