@ngx-file-upload/core
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    ngx file upload / core

    npm Codacy Badge DeepScan grade codecov dependencies Status youtube how tow

    Angular 13 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.

    Versions

    • angular@13 - 5.x.x
    • angular@12 - 4.x.x

    Version 4

    • supports now upload of multiple files per request
    • fixed some performance issues

    breaking changes

    • NgxFileUploadFactory returns now only one request with all filles which are passed
    • renamed NgxFileUpload to NgxFileUploadRequest
    • NgxFileUpload.data.name now returns an array of file names which are added to the request
    • added NgxFileUpload.data.files: INgxFileUploadFile[]

    Version 3

    • update angular to version 12

    Angular 9

    Use ngx-file-upload/ui v2.2.1.

    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.

    @Install

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

    @Example

    NgxFileDrop

    For this example we use ngx-file-drop library for drag and drop which can also handles drag n drop directories.

    app.module.ts

    import { CommonModule } from "@angular/common";
    import { NgModule } from "@angular/core";
    import { RouterModule } from "@angular/router";
    import { NgxFileUploadUiProgressbarModule, NgxFileUploadUiCommonModule, NgxFileUploadUiToolbarModule } from "@ngx-file-upload/ui";
    import { NgxFileDropModule } from "ngx-file-drop";
    import { DropZoneComponent } from "./ui/drop-zone";
    
    @NgModule({
      imports: [
        CommonModule,
        NgxFileUploadUiToolbarModule,
        NgxFileUploadUiProgressbarModule,
        NgxFileUploadUiCommonModule,
        NgxFileDropModule,
      ])],
      declarations: [DropZoneComponent],
      entryComponents: [DropZoneComponent],
      providers: [],
    })
    export class DropZone { }

    app.component.ts

    import { Component, Inject, OnInit, OnDestroy } from "@angular/core";
    import { 
      NgxFileUploadStorage,
      NgxFileUploadFactory,
      NgxFileUploadOptions,
      NgxFileUploadState,
      INgxFileUploadRequest
    } from "@ngx-file-upload/core";
    import { NgxFileDropEntry, FileSystemFileEntry } from "ngx-file-drop";
    import { takeUntil } from "rxjs/operators";
    import { Subject } from "rxjs";
    
    @Component({
      selector: "app-drop-zone",
      templateUrl: "drop-zone.html"
    })
    export class DropZoneComponent implements OnDestroy, OnInit {
    
      uploads: INgxFileUploadRequest[] = [];
      uploadStorage: NgxFileUploadStorage;
      code = ExampleCodeData;
      states = NgxFileUploadState;
    
      /** upload options */
      private uploadOptions: NgxFileUploadOptions = {
        url: "http://localhost:3000/upload/gallery",
        formData: {
          enabled: true,
          name: "picture",
          metadata: {
            role: 'DEV_NULL',
            parent: -1
          }
        },
      };
    
      private destroy$: Subject<boolean> = new Subject();
    
      constructor(
        @Inject(NgxFileUploadFactory) private uploadFactory: NgxFileUploadFactory
      ) {
        this.uploadStorage = new NgxFileUploadStorage({ concurrentUploads: 1 });
      }
    
      drop(files: NgxFileDropEntry[]) {
        const sources: File[] = []
    
        files.forEach((file) => {
          if (file.fileEntry.isFile) {
            const dropped = file.fileEntry as FileSystemFileEntry;
            dropped.file((droppedFile: File) => {
              if (droppedFile instanceof DataTransferItem) {
                return;
              }
              sources.push(droppedFile);
            });
          }
        });
    
        // * upload all dropped files into one request
        const request = this.uploadFactory.createUploadRequest(sources, this.uploadOptions);
        /**
         * alternate push multiple requests at once, or add them later to storage
         *
         * @example
         * 
         * const requests: INgxFileUploadRequest[] = []
         * 
         * do {
         *   const toUpload = files.splice(0, 3)
         *   requests.push(this.uploadFactory.createUploadRequest(sources, this.uploadOptions))
         * } while (files.length)
         * 
         * storage.add(requests)
         */
        if (request) {
          this.uploadStorage.add(request);
        }
      }
    
      ngOnInit() {
        this.uploadStorage.change()
          .pipe(takeUntil(this.destroy$))
          .subscribe((uploads) => this.uploads = uploads);
      }
    
      ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.complete();
        this.uploadStorage.destroy();
      }
    }

    app.component.html

    <!-- requires @ngx-file-upload/ui package -->
    <ngx-file-upload-ui--toolbar [storage]="uploadStorage"></ngx-file-upload-ui--toolbar>
    
    <ngx-file-drop (onFileDrop)="drop($event)" [dropZoneLabel]="'Drop or'"
      [dropZoneClassName]="'ngx-fileupload__ngx-file-drop'" [showBrowseBtn]="true" [browseBtnLabel]="'Browse'">
    </ngx-file-drop>
    
    <div class="files">
      <div *ngFor="let upload of uploads" class="upload">
          <div class="data">
              <span class="name">{{upload.data.name}}</span>
              <span class="uploaded">
                {{upload.data.uploaded | fileSize}} | {{upload.data.size | fileSize}} | {{upload.data.progress}}%
              </span>
              <span class="state">{{upload.data.state | stateToString}}</span>
          </div>
    
          <ngx-file-upload-ui--progressbar [progress]="upload.data.progress" [parts]="5" [gap]="1" [duration]="100">
          </ngx-file-upload-ui--progressbar>
      </div>
    </div>

    @Demo

    Demo can be found here.

    @ngx-file-upload/ui

    for some ui components like progressbars, toolbars, drop-zone or full item template

    npm

    @Docs

    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

    @ngx-file-upload/ui

    npm

    @Credits

    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

    Author

    Ralf Hannuschka Github

    Other Modules

    Install

    npm i @ngx-file-upload/core

    DownloadsWeekly Downloads

    469

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    290 kB

    Total Files

    42

    Last publish

    Collaborators

    • r-hannuschka