ngxf File uploader for Angular 6+ only uses Angular HttpClient, not any other dependency.

angular material file upload, file upload in angular, angular 9 file upload example, angular file upload example

• ✅ file upload
• ✅ multiple File upload
• ✅ accept support
• ✅ Progress support
• ✅ upload http request support
• ✅ folder upload.

Simple Vue Component for File Photo Uploader With Preview

How to make use of it:

Install:

npm install ngxf-uploader --save

1. Import the HttpClientModule, NgxfUploaderModule into the main AppModule or module.

// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";

import { AppComponent } from "./app.component";

import { NgxfUploaderModule } from "ngxf-uploader";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, NgxfUploaderModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Add a directive in the template where you want to use it.

<!-- select file -->
<button class="btn red cursor-pointer mr-2" (ngxf-select)="uploadFile($event)">
  Upload Single File
</button>

<!-- drop file & parse image -->
<div
  class="upload-block cursor-pointer"
  (ngxf-drop)="uploadFiles($event)"
  (ngxf-parse)="uploadFiles($event)"
  [ngxf-validate]="{size: {min: 5000, max:2566621} ,skipInvalid: true}"
  drop-class="drop"
  accept="image/*"
  multiple
>
  <div class="mask" style="z-index: 1;"></div>
  <mat-icon
    class="c-white mat-accent"
    style="z-index: 2;"
    (ngxf-select)="uploadFiles($event)"
    [ngxf-validate]="{size: {min: 5000, max:2566621} ,skipInvalid: true}"
    accept="image/*"
    multiple
  >
    cloud_upload
  </mat-icon>
  <h3>Drop file and parse image into here or click here to choice file.</h3>
</div>

3. Add NgxfUploaderService in the constructor and create the file upload method in typescript and upload the file to the server.

import { Component } from "@angular/core";
import {
  FileError,
  NgxfUploaderService,
  UploadEvent,
  UploadStatus,
} from "ngxf-uploader";

@Component({
  selector: "app-drop-file",
  templateUrl: "./drop-file.component.html",
  styleUrls: ["./drop-file.component.scss"],
})
export class DropFileComponent {
  progress = 0;
  isUploading = false;

  constructor(private Upload: NgxfUploaderService) {}

  uploadFile(file: File | FileError): void {
    console.log(file);
    this.isUploading = true;
    if (!(file instanceof File)) {
      this.alertError(file);
      this.isUploading = false;
      return;
    }
    this.Upload.upload({
      url: "your api url",
      headers: {
        Authorization: "token",
      }, // Option
      params: {
        test: "123",
      }, // Option
      fields: {
        // Option
        toUrl: "device",
      },
      filesKey: "fileKey", // Option
      files: file,
      process: true,
    }).subscribe(
      (event: UploadEvent) => {
        console.log(event);
        this.progress = event.percent;
        if (event.status === UploadStatus.Completed) {
          alert(`This file upload success!`);
        }
      },
      (err) => {
        console.log(err);
      },
      () => {
        this.isUploading = false;
        console.log("complete");
      }
    );
  }

  uploadFiles(files: File[] | FileError): void {
    console.log(files);
    this.isUploading = true;
    if (!(files instanceof Array)) {
      this.alertError(files);
      this.isUploading = false;
      return;
    }
    this.Upload.upload({
      url: "your api url",
      headers: {
        Authorization: "token",
      }, // Option
      params: {
        test: "123",
      }, // Option
      fields: {
        // Option
        toUrl: "device",
      },
      filesKey: "fileKey", // Option
      files: files,
      process: true, // if you want process event, set process true
    }).subscribe(
      (event: UploadEvent) => {
        console.log(event);
        this.progress = event.percent;
        if (event.status === UploadStatus.Completed) {
          alert(`upload complete!`);
        }
      },
      (err) => {
        console.log(err);
      },
      () => {
        this.isUploading = false;
        console.log("complete");
      }
    );
  }

  // Do something you want when file error occur.
  alertError(msg: FileError) {
    switch (msg) {
      case FileError.NumError:
        alert("Number Error");
        break;
      case FileError.SizeError:
        alert("Size Error");
        break;
      case FileError.TypeError:
        alert("Type Error");
        break;
    }
  }
}

File Uploader For Angular, ngxf-uploader Plugin/Github

See Demo And Download

Official Website(ZouYouShun): Click Here

This superior jQuery/javascript plugin is developed by ZouYouShun. For extra Advanced usage, please go to the official website.