Rate these docs

Angular Bootstrap drag and drop file upload

Angular Drag And Drop File Upload - Bootstrap 4 & Material Design

Angular Bootstrap File Upload plugin is an extension that allows you to upload files by using drag and drop functionality. Easy to use, setup and customize.


Basic example


          <mdb-file-upload (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"></mdb-file-upload>
        

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

          @Component({
            selector: 'file-upload',
            templateUrl: './file-upload.component.html',
          })
          export class FileUpload  {
            file: File;

            onFileAdd(file: File) {
              this.file = file;
            }

            onFileRemove() {
              this.file = null;
            }
          }
        

Custom height

You can use [height] input to set custom height.


          <mdb-file-upload [height]="500" (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"></mdb-file-upload>
        

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

          @Component({
            selector: 'file-upload',
            templateUrl: './file-upload.component.html',
          })
          export class FileUpload  {
            file: File;

            onFileAdd(file: File) {
              this.file = file;
            }

            onFileRemove() {
              this.file = null;
            }
          }
        

Disable

You can use [disabled] input to toggle disabled state.


          <mdb-file-upload [disabled]="true" (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"></mdb-file-upload>
        

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

          @Component({
            selector: 'file-upload',
            templateUrl: './file-upload.component.html',
          })
          export class FileUpload  {
            file: File;

            onFileAdd(file: File) {
              this.file = file;
            }

            onFileRemove() {
              this.file = null;
            }
          }
        

Upload files

The file you added to the input is returned in (fileAdded) output. You can listen to this event and upload the file to server

Please note that in order to use Angular HttpClient you need to import HttpClientModule in your module file.


          <mdb-file-upload [disabled]="true" (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"></mdb-file-upload>
        

          import { Component } from '@angular/core';
          import { HttpClient } from '@angular/common/http'

          @Component({
            selector: 'file-upload',
            templateUrl: './file-upload.component.html',
          })
          export class FileUpload  {
            file: File;

            constructor(private http: HttpClient) {}

            onFileAdd(file: File) {
              this.file = file;
            }

            onFileRemove() {
              this.file = null;
            }

            uploadFiles() {
              const url = 'your-path-to-backend-endpoint'
              const data = new FormData();
              data.append('file', this.file, this.file.name)

              this.http.post(url, data);
            }
          }
        

Max size

You can limit size of uploaded file


          <mdb-file-upload [disabled]="true" (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"></mdb-file-upload>
        

          import { Component } from '@angular/core';
          import { HttpClient } from '@angular/common/http'

          @Component({
            selector: 'file-upload',
            templateUrl: './file-upload.component.html',
          })
          export class FileUpload  {
            file: File;
            maxFileSize = 1000 // bytes

            constructor(private http: HttpClient) {}

            onFileAdd(file: File) {
              this.file = file;
            }

            onFileRemove() {
              this.file = null;
            }

            uploadFiles() {
              const url = 'your-path-to-backend-endpoint'
              const data = new FormData();
              data.append('file', this.file, this.file.name)

              if (this.file.size <= this.maxFileSize) {
                this.http.post(url, data);
              }
            }
          }
        

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Angular Drag And Drop File Upload - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of drag and drop file upload plugin.


Download

This plugin requires a purchase.

Buy Drag and drop file upload plugin - $9

Components

MdbFileUpload

Selector: mdb-file-upload

Type: MdbFileUploadComponent


Inputs

Name Type Default Description Example
disabled boolean false Allow to toggle disabled state [disabled]="true"
height number 200 Allow to set custom height [height]="500"

Outputs

Name Type Description Example
fileAdded EventEmitter<File> Event fired when new file is added (fileAdded)="onFileAdd($event)"
fileRemoved EventEmitter<any> Event fired when file is removed (fileRemoved)="onFileRemove()"

Methods

You can get access to file upload methods from another component. Add template reference variable to your mdb-file-upload component in HTML file

<mdb-file-upload #uploader></mdb-file-upload>

Then in your typescript file use @ViewChild decorator to get access to MdbFileUploadComponent methods

@ViewChild('uploader') uploader: MdbFileUploadComponent

Name Description Example
reset Removes file from input this.uploader.reset()