Search results

Determine whether Uploader has File Input in Angular Uploader component

27 Jul 2021 / 2 minutes to read

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

Source
Preview
app.component.ts
app.module.ts
main.ts
default.html
index.css
Copied to clipboard
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { EmitType, createElement, detach } from '@syncfusion/ej2-base';
import { UploaderComponent, SelectedEventArgs, FormValidator, FormValidatorModel  } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
@Component({
    selector: 'app-root',
    templateUrl: 'default.html',
    styleUrls: ['index.css']
})

export class AppComponent {
    @ViewChild('defaultupload')
    public uploadObj: UploaderComponent;
    @ViewChild('dialog')
    public dialog: DialogComponent;

    public path: Object = {
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
        removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
    };
    public removeFile: any = [];
    public content: string = 'Your details have been updated successfully, Thank you.';
    public width: string = '250px';
    public visible: boolean = false;
    public header: string = 'Success';
    public target: HTMLElement = document.getElementById('control_wrapper')
    public onFileSelect: EmitType<SelectedEventArgs> = (args: any) =>  {
        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);
        this.readURL(wrapper, args.filesData[0]);
        }
        args.cancel = true;
    }
    ngAfterViewInit() {
        document.getElementById('customBrowse').onclick = () => {
            document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
        };
        document.getElementById('submit-btn').onclick = () => {
            this.onFormSubmit();
        };
        let options = { rules: { 'name': { required: true } } };
        let formObj: FormValidator = new FormValidator('#form1', this.options);
        let proxy = this;
        setTimeout(() => {
            this.uploadObj.element.setAttribute('data-required-message', '* Choose your image to upload');
            this.uploadObj.element.setAttribute('required', '');
            this.uploadObj.element.setAttribute('data-msg-containerid', 'uploadError');
        }, 500);
    }
    public readURL: EmitType<SelectedEventArgs> = (li: HTMLElement, args: any) => {
        let preview: HTMLImageElement = li.querySelector('.upload-image');debugger
        let file: File = args.rawFile; let reader: FileReader = new FileReader();
        reader.addEventListener('load', () => { preview.src = reader.result; }, false);
        if (file) { reader.readAsDataURL(file); }
    }
    public onFormSubmit: any = () => {
        let formObj: FormValidator = new FormValidator('#form1', this.options);
        let formStatus: Boolean = formObj.validate();
        if (formStatus) {
            formObj.element.reset();
            detach(document.getElementsByClassName('imgWrapper')[0]);
            this.dialog.show();
        }
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
import { DialogModule } from '@syncfusion/ej2-angular-popups';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, UploaderModule, DialogModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div class="control-section">
    <div class="control_wrapper">      
        <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" class='error'></div>                     
                    </div>            
                    <div id="dropArea">
                        <div id="uploadError" style='float: right;'></div>
                        <div id='customBrowse' class="form-group dropUpload">   Click here...            
                            <ejs-uploader #defaultupload id='fileupload' [asyncSettings]='path' [autoUpload]='autoUpload' (selected)='onFileSelect($event)' [allowedExtensions]='extensions' multiple=true [dropArea]='dropElement'></ejs-uploader>
                        </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>                                                                          
                <ejs-dialog #dialog id='dialog' [content]='content' [header]='header' isModal=true showCloseIcon=true [width]='width' [visible]='visible' [target]='target'></ejs-dialog>
            </div>
        </div>
    </div>
</div>
Copied to clipboard
#container {
  visibility: hidden;
  margin: 0 auto;
  width: 300px;
}

#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;
}

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