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