Get unlimited public & private packages + package-based permissions with npm Pro.Get started »


2.2.1 • Public • Published

ngx file upload / core

npm Codacy Badge DeepScan grade codecov dependencies Status

Angular 9+ file upload core files for asynchronous file upload. This package does not contain any UI components in order to stay as small as possible and to guarantee the freedom to design the entire surface yourself without bringing the overhead of styles, images and fonts that are not required.

This library contains

  • Storage to store all uploads and used them app wide or only in component.
  • A queue to limit the number of active uploads and upload more later.
  • Validation
  • ansychronous file uploads with live progress update.

Angular 9

This package is build with angular 9 and typescript ^3.7.5 which is not supported by angular 8 by default. Typings for 3.5.5 and 3.7.5 are diffrent, if u want use this package in Angular 8 Project update your Angular 8 Project to Typescript ^3.7.5.

We also change all namespaces to have NgxFileUpload as prefix @see breaking change 1.1.2 to 2.0.0

Angular 8

For Angular 8 ngx-file-upload/core v1.1.2, compiled with typescript 3.5.x which is used default by angular 8.


npm i --save @ngx-file-upload/core


This example uses ngx-dropzone module which also provides some ui components for a drop zone and preview. We could simply use this and put our own stuff on top of this.

  • only 2 Uploads on same time all other will queued
  • all uploads will persist in storage, so we have an provider we could on other components to get current uploads.
  • uploads will start automatically if they put into queue
  • uploads will removed automatically after 5 seconds if they completed


import { BrowserModule } from "@angular/platform-browser";
import { CommonModule } from "@angular/common";
import { NgModule, Provider } from "@angular/core";
import { NgxFileUploadCoreModule } from "@ngx-file-upload/core";
import { NgxDropzoneModule } from "ngx-dropzone";
import { AppComponent } from "./app.component";
    declarations: [
    imports: [
        // app module
    bootstrap: [AppComponent]
export class AppModule {}


import { Component, OnInit, Inject } from '@angular/core';
import { NgxFileUploadStorage, NgxFileUploadFactory, NgxFileUploadOptions, NgxFileUploadRequest } from "@ngx-file-upload/core";
    selector: "app-component",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
export class AppComponent implements OnInit {
    public uploads: NgxFileUploadRequest[] = [];
    private storage: NgxFileUploadStorage;
    private uploadOptions: NgxFileUploadOptions;
      @Inject(NgxFileUploadFactory) private uploadFactory: NgxFileUploadFactory
    ) { = new NgxFileUploadStorage({
          concurrentUploads: 2,
          autoStart: true,
          removeCompleted: 5000 // remove completed after 5 seconds
        this.uploadOptions = {url: "http://localhost:3000/gallery/add"};
    ngOnInit() {
        .subscribe(uploads => this.uploads = uploads);
    public onSelect(event) {
      const addedFiles: File[] = event.addedFiles;
      if (addedFiles.length) {
        const uploads = this.uploadFactory.createUploadRequest(addedFiles, this.uploadOptions);;
    public onRemove(upload: NgxFileUploadRequest) {;


For uploading images

<ngx-dropzone (change)="onSelect($event)">
    <ngx-dropzone-label>Drop or Browse</ngx-dropzone-label>
    <ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let upload of uploads"
        Name: {{ }}<br />
        State: {{}}<br />
        Progress: {{}}%


Demo can be found here.


Name Short Description Docs
API all interfaces API
Upload Storage simple upload storage which holds all upload requests and controls them Upload Storage
Upload Factory factory to create new upload requests which can added to upload storage Upload Factory
Upload Queue part of upload storage and controls how many uploads run at the same time -
Validation Validation Classes for upload requests Vaidation




Special thanks for code reviews, great improvements and ideas to

alt Konrad Mattheis
Konrad Mattheis
Thomas Haenig
Thomas Haenig
alt Alexander Görlich
Alexander Görlich


Ralf Hannuschka Github

Other Modules


npm i @ngx-file-upload/core

DownloadsWeekly Downloads






Unpacked Size

682 kB

Total Files


Last publish


  • avatar