Search results

Achieve Invisible Upload in Angular Uploader component

14 Apr 2021 / 1 minute to read

You can achieve the invisible upload feature by using selected event in uploader component. Refer to the following example.

Source
Preview
app.component.ts
app.module.ts
main.ts
default.html
index.css
Copied to clipboard
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);
    }
};
}
Copied to clipboard
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 {
}
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="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>
Copied to clipboard
#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;
}