Search results

Determine whether the uploader has input file (required validation)

By setting the required attribute to uploader input element, you can validate the input file that has any value in it. In the following sample, set required attribute to the uploader input element and showcase the validation failure message using the data-required-message attribute.

Source
Preview
index.js
index.html
index.css
ej.base.enableRipple(true);
var dropElement = document.getElementsByClassName('dropUpload')[0];
// Initialize the uploader component
var uploadObj = new ej.inputs.Uploader({
    autoUpload: false,
    selected: onFileSelect,
    allowedExtensions: 'image/*',
    multiple: true,
    dropArea: dropElement,
});
uploadObj.appendTo('#fileupload');

document.getElementById('customBrowse').addEventListener('onclick', function() {
    document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
});
function onFileSelect(args) {
    if (args.filesData.length > 0) {
        if (document.getElementsByClassName('upload-image').length > 0) {
            ej.base.detach(document.getElementsByClassName('imgWrapper')[0]);
        }
        var imageTag = ej.base.createElement('IMG', { className: 'upload-image', attrs: { 'alt': 'Image' } });
        var wrapper = ej.base.createElement('span', { className: 'imgWrapper' });
        wrapper.appendChild(imageTag);
        var rootFile = document.getElementsByClassName('dropUpload')[0];
        rootFile.insertBefore(wrapper, rootFile.firstChild);
        readURL(wrapper, args.filesData[0]);
    }
    args.cancel = true;
}

function readURL(li, args) {
    var preview = li.querySelector('.upload-image');
    var file = args.rawFile; var reader = new FileReader();
    reader.addEventListener('load', () => { preview.src = reader.result; }, false);
    if (file) { reader.readAsDataURL(file); }
}

var options = {};
var formObj = new ej.inputs.FormValidator('#form1', options);

function onFormSubmit() {
    var formStatus = formObj.validate();
    if (formStatus) {
        formObj.element.reset();
        detach(document.getElementsByClassName('imgWrapper')[0]);
        confirm.show();
    }
}

var confirm = new ej.popups.Dialog({
    width: '335px',
    visible: false,
    header: 'Success',
    content: 'Your details have been updated successfully, Thank you.',
    target: document.getElementById('control_wrapper'),
    showCloseIcon: true,
    isModal: true,
    animationSettings: {
        effect: 'Zoom'
    }
});
confirm.appendTo('#confirmationDialog');

document.getElementById('submit-btn').addEventListener('onclick', function() {
    onFormSubmit();
});
<!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 Uploader 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://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="col-lg-12 control-section">
            <h4 class="form-title">Photo Contest</h4>
        <div class="control_wrapper" id="control_wrapper">
            <form id="form1" method="post">
                <div class="form-group" style="padding-top: 40px; float: left">
                    <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 id="dropArea">
                    <div id="uploadError" style="float: right;"></div>
                    <div id="customBrowse" class="form-group dropUpload">   Drop image here...               
                        <input type="file" name="UploadFiles" id="fileupload" data-required-message="* Choose your image to upload" required data-msg-containerid="uploadError">
                        
                    </div>
                    </div>  
                <div class="submitBtn">
                    <button type="button" class="submit-btn e-btn" id="submit-btn">Submit</button>
                    <div class="desc"><span>*This button is not a submit type and the form submit handled from externally.</span></div>                     
                </div> 						
            </form>                                                                          
            <div id="confirmationDialog"></div>
        </div>
    </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#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%;
}

.control_wrapper {
  max-width: 400px;
  margin: auto;
}
.control_wrapper .e-upload .e-upload-drag-hover {
  margin: 0;
}
.address-field {
  resize: none;
}
#dropArea .dropUpload .upload-image {
  height: 140px;
  width: 140px;
}
#dropArea .dropUpload {        
  float: right;
  text-align: center;
  vertical-align: middle;
  line-height: 12;
  overflow: hidden;
  border: 1px dashed;
  width: 150px;
  height: 150px;
}
.e-upload {
  visibility: hidden;
}
#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% 7%;
  background: #f9f9f9;
}
.e-error {
  padding-top:3px;
}
.control_wrapper .e-upload .e-upload-drag-hover {
  margin: 0;
}

.submit-btn {
  margin-top: 15px;
  margin: auto 100px;
}
.submitBtn .desc {
  margin: 2% 23% 0 18%;
}
.submitBtn {
  text-align: center;
}
.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 {
  float: none;
}
.choose-file{
  width: 60%;
}
#browse {
  float: right;
  margin-right: -113px;
  margin-top: -27px;
}
.form-title {
  text-align: center;
}