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
app.ts
index.html
index.css
import { detach, createElement } from '@syncfusion/ej2-base';
import { FormValidator, Uploader } from '@syncfusion/ej2-inputs';
import { Dialog } from '@syncfusion/ej2-popups';

let dropElement = document.getElementsByClassName('dropUpload')[0];
// Initialize the uploader component
let uploadObj: Uploader = new Uploader({
    autoUpload: false,
    selected: onFileSelect,
    allowedExtensions: 'image/*',
    multiple: true,
    dropArea: dropElement,
});
uploadObj.appendTo('#fileupload');

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

function readURL(li: HTMLElement, args: any): void {
    let preview: HTMLImageElement = li.querySelector('.upload-image');
    let file: File = args.rawFile; let reader: FileReader = new FileReader();
    reader.addEventListener('load', () => { preview.src = reader.result; }, false);
    if (file) { reader.readAsDataURL(file); }
}

let options = {};
let formObj: FormValidator = new FormValidator('#form1', options);

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

let confirm: Dialog = new 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').onclick = () => {
    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://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">
            <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>
</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;
}