Getting Started

This section explains how to create and configure the uploader component in Angular. The uploader component is available in @syncfusion/ej2-ng-inputs package. Utilize this package to render the uploader Component.

Dependencies

The following packages are required to render the uploader component in your Angular application.

|-- @syncfusion/ej2-ng-inputs
    |-- @syncfusion/ej2-ng-base
    |-- @syncfusion/ej2-ng-popups
    |-- @syncfusion/ej2-ng-buttons
    |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-buttons

Installation and configuration

  • To setup basic Angular sample by using the following commands:
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

For more information about Angular application configuration, refer to Angular sample setup.

  • Install Syncfusion input packages using below command.
npm install @syncfusion/ej2-ng-inputs --save

The above package installs Uploader dependencies which are required to render the component in the Angular environment.

  • Syncfusion ej2-ng-inputs packages needs to be mapped in systemjs.config.js configuration file as below in the configured Angular application.
/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
System.config({
    paths: {
         // paths serve as alias
        'npm:': 'node_modules/',
         "syncfusion:": "node_modules/@syncfusion/", //** syncfusion path alias **
    },
    // map tells the System loader where to look for things
    map: {

        // our app is within the app folder
        app: 'app',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

        // syncfusion packages
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
        "@syncfusion/ej2-ng-base": "syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js",
        "@syncfusion/ej2-ng-inputs": "syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js",

        // other libraries
        'rxjs':                      'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },

    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Adding CSS Reference

Add uploader component's styles as given below in styles.css.

@import "../node_modules/@syncfusion/ej2-ng-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-ng-buttons/styles/material.css";

Initialize Uploader

The below couple of steps describes to initialize the uploader component in Angular application.

  • Import UploaderModule from @syncfusion/ej2-ng-inputs package, inject into imports section of NgModule in the module file src/app/app.module.ts to use the Uploader component across the application.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';
import { UploaderComponent } from '@syncfusion/ej2-ng-inputs';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, UploaderComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
  • Now, you can render Uploader component using ejs-uploader tag in src/app/app.component.ts file by modifying the component's template and also include the component theme from the corresponding base package @syncfusion/ej2-uploader component through styleUrls.

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `
               <ejs-uploader #defaultupload  [autoUpload]='false'></ejs-uploader>
              `
})
export class AppComponent {
    constructor() {
    }
}

Run the application

After completing the configuration required to render the uploader, run the application using the following command to display the output in your default browser.

npm run start

From v16.2.41 version, the Essential JS2 AJAX library has been integrated for uploader server requests. Hence, use the third party promise library like blue-bird to use the uploader in Internet Explorer.

The below example shows a uploader component.

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `
               <ejs-uploader #defaultupload  [autoUpload]='false'></ejs-uploader>
              `
})
export class AppComponent {
    constructor() {
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { UploaderComponent } from '@syncfusion/ej2-ng-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, UploaderComponent],
    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);

Adding drop area

By default, the uploader component allows to upload files by drag the files from file explorer, and drop into the drop area. You can configure any other external element as drop target using dropArea property.

In the following sample, external element is configured as drop target to uploader component.

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `
               <div id='droparea'>
            Drop files here to upload
        </div>
        <div id='uploadfile' >
               <ejs-uploader #defaultupload  [autoUpload]='false' [dropArea]='dropEle'></ejs-uploader>
               </div>
              `
})
export class AppComponent {
    public dropEle: HTMLElement ;
    ngOnInit() {
          this.dropEle = document.getElementById('droparea');
    }
    constructor() {
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { UploaderComponent } from '@syncfusion/ej2-ng-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, UploaderComponent],
    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);

Configure asynchronous settings

By default, the uploader component process the files in Asynchronous mode. Define the properties saveUrl and removeUrl to handle the save and remove action as follows.

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `
               <div id='droparea'>
            Drop files here to upload
        </div>
        <div id='uploadfile' >
               <ejs-uploader #defaultupload  [autoUpload]='false' [dropArea]='dropEle' [asyncSettings]='path'></ejs-uploader>
               </div>
              `
})
export class AppComponent {
     public path: Object = {
      saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
      removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' };
    constructor() {
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { UploaderComponent } from '@syncfusion/ej2-ng-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, UploaderComponent],
    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);

Handle success and failed upload

You can handle the success and failure actions using the success and failure events. To handle these events, define the function and assign it to corresponding event as follows.

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `
               <ejs-uploader #defaultupload [autoUpload]='false' [dropArea]='dropEle' [asyncSettings]='path' (success)="onUploadSuccess($event)" (failure)="onUploadFailure($event)"></ejs-uploader>
              `
})
export class AppComponent {
public path: Object = {
      saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
      removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' };
      public onUploadSuccess(args: any): void  {
        if (args.operation === 'upload') {
            console.log('File uploaded successfully');
        }
    }

    public onUploadFailure(args: any): void  {
    console.log('File failed to upload');
    }

    public dropEle: HTMLElement ;
    ngOnInit() {
          this.dropEle = document.getElementById('droparea');
    }

    constructor() {
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { UploaderComponent } from '@syncfusion/ej2-ng-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, UploaderComponent],
    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);