You can trigger the click event of input file from external button using click
event of button. In the below sample, triggered click event of input file from Essential JavaScript 2 Button
.
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'default.html',
styleUrls: ['index.css']
})
export class AppComponent {
public autoUpload: boolean = false;
public path: Object = {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
};
ngAfterViewInit(): void {
document.getElementById('browse').onclick = (args) => {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, UploaderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div class="control-section">
<div class="control_wrapper">
<!-- Initialize Uploader -->
<div id="dropArea">
<span id="drop"> Drop image (JPG, PNG) files here or <button class='e-btn e-control' id="browse">Browse</button></span>
</div>
<ejs-uploader #defaultupload id='fileupload' [asyncSettings]='path' [autoUpload]='autoUpload' ></ejs-uploader>
</div>
</div>