You can achieve the invisible upload feature by using selected event in uploader component. Refer to the following example.
import { Component } from '@angular/core';
import { createElement } from '@syncfusion/ej2-base';
import { SelectedEventArgs } from '@syncfusion/ej2-angular-inputs';
/**
* Default Uploader Default Component
*/
@Component({
selector: 'app-root',
templateUrl: 'default.html',
styleUrls: ['index.css']
})
export class AppComponent {
public path: Object = {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
};
public allowExtensions: string = '.png, .jpg, .jpeg';
public onSelected(args: SelectedEventArgs):void {
for(let i = 0; i< args.filesData.length ; i++){
let liparentDiv = createElement('div', { className: 'image-list'});
let liImage = createElement('img', { className: 'image'});
liparentDiv.appendChild(liImage);
this.readURL(liImage, args.filesData[i]);
document.getElementById('preview').appendChild(liparentDiv);
}
args.cancel=true;
}
public readURL(liImage: HTMLElement, file: any):void {
let imgPreview: HTMLImageElement = liImage as HTMLImageElement;
let imageFile: File = file.rawFile;
let reader: FileReader = new FileReader();
reader.addEventListener( 'load', () => {
imgPreview.src = reader.result;
}, false);
if (imageFile) {
reader.readAsDataURL(imageFile);
}
};
}
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="col-lg-9">
<div class="control_wrapper">
<div id='preview'></div>
<ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' (selected)='onSelected($event)' [locale]='en-US' [allowedExtensions]='allowExtensions'></ejs-uploader>
</div>
</div>
</div>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.control_wrapper {
max-width: 500px;
min-width: 245px;
margin: auto;
}
#preview {
border: 2px dashed #ddd;
padding: 15px;
}
.image-list {
width: 134px;
height: 117px;
margin-right: 4px;
border: 1px solid lightgrey;
display: inline-block;
}
.image {
width: 134px;
height: 117px;
margin-right: 4px;
display: inline-block;
}
.e-control {
border : 0;
}
.e-control ul {
border: 1px solid #ddd;
}
.e-control .e-file-select,
.e-control .e-file-drop {
display: none;
}