You can upload a file programmatically using upload method. The selected files data, get from getFilesData public method in uploader.
The upload method behaves differently based on its arguments.
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { UploaderComponent } from '@syncfusion/ej2-angular-inputs';
@Component({
selector: 'app-root',
templateUrl: 'default.html',
styleUrls: ['index.css']
})
export class AppComponent {
@ViewChild('defaultupload')
public uploadObj: UploaderComponent;
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('first').onclick = (args) => {
this.uploadObj.upload(this.uploadObj.getFilesData()[0]);
};
document.getElementById('full').onclick = (args) => {
this.uploadObj.upload(this.uploadObj.getFilesData());
};
}
}
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">
<ejs-uploader #defaultupload id='fileupload' [asyncSettings]='path' [autoUpload]='autoUpload' ></ejs-uploader>
</div>
<span style=' padding-left: 40px; margin-top: 30px'>
<button id='first' class='e-btn e-control'>Upload first file</button>
</span>
<span style=' padding-left: 40px; margin-top: 30px'>
<button id='full' class='e-btn e-control'>Upload all files</button>
</span>
</div>
#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: 500px;
margin: auto;
}
.e-upload {
width: 100%;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}
.e-upload-actions {
display: none;
}
.e-btn {
text-transform: none;
}