Ng-bootstrap-fileupload-angular NPM

ng-bootstrap-fileupload-angular

Angular File Upload

npm

This package supports Angular 8+

Description

This fileupload is responsive design, so feel free to try it in your desktops, tablets and mobile devices.

Dependencies

bootstrap ^4.0.0

Live Demo

https://ng-bootstrap-fileupload-angular.stackblitz.io

How to Use

Install with npm:npm install ng-bootstrap-fileupload-angular --save

Add NgBootstrapFileuploadAngularModule to your @NgModule like example below

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";

import { NgBootstrapFileuploadAngularModule } from "ng-bootstrap-fileupload-angular";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgBootstrapFileuploadAngularModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Add your input into form like example below

<form>
  <div [formGroup]="formGroup">
    <ng-bootstrap-fileupload-angular
        previewUrl="https://raw.githubusercontent.com/danilomx/ng-bootstrap-fileupload-angular/master/src/assets/user.png"
        showPreview="true" formControlName="FileUp"></ng-bootstrap-fileupload-angular>
  </div>
</form>

Connect to your component

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  title = "FileUp";
  formGroup: FormGroup;

  ngOnInit() {
    this.formGroup = new FormGroup({
      FileUp: new FormControl(null, {
        validators: [Validators.required]
      })
    });
  }
}