Angular Bootstrap File Upload

Angular File Upload - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

The 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;
                }
              }

Default value

You can add a custom url to the [defaultFile] input to set a default preview image.

        
            
            <mdb-file-upload
              #uploader
              (fileRemoved)="onFileRemove()"
              (fileAdded)="onFileAdd($event)"
              [defaultFile]="'https://mdbootstrap.com/img/Photos/Others/images/89.webp'"
            >
            </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 the [height] input to set a 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 the [disabled] input to toggle the 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 the server

Please note that in order to use the 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 the size of an 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);
                }
              }
            }

Installation guide

Step 1: Create a new Angular application using Angular CLI command:

ng new application-name --style=scss --routing=false

Step 2: Download this plugin from your user dashboard

Step 3: Extract the downloaded archive from Step 2 and copy the mdb-file-upload-{version-number}.tgz file to your application root directory

Step 4: Install the mdb-file-upload-{version-number}.tgz package in your application by executing the command below in the application's terminal:

npm install mdb-file-upload-{version-number.tgz} --save

For example, the installation command should look like the following: npm install mdb-file-upload-8.0.0.tgz --save

Step 5: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 6: Import the MdbFileUploadModule in the app.module.ts file

Step 7: Copy the basic example from this site and enjoy your new plugin!

Step 1: Download this plugin from your user dashboard

Step 2: Extract the downloaded archive from Step 1 and copy the mdb-file-upload-{version-number}.tgz file to your application root directory

Step 3: Install the mdb-file-upload-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-file-upload-{version-number.tgz} --save

For example, the installation command should look like the following: npm install mdb-file-upload-8.0.0.tgz --save

Step 4: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 5: Import the MdbFileUploadModule into the app.module.ts file

Step 6: Copy the basic example from this site and enjoy your new plugin!

Angular Drag And Drop File Upload - API

In this section you will find information about the 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

Components

MdbFileUpload

Selector: mdb-file-upload

Type: MdbFileUploadComponent

Inputs

Name Type Default Description Example
defaultFile string - Allows one to set url to a file that will be used for default preview [defaultFile]="'https://mdbootstrap.com/img/Photos/Others/images/89.webp'"
disabled boolean false Allows one to toggle the disabled state [disabled]="true"
height number 200 Allows one to set custom height [height]="500"
customText ITextTranslation {fileText: 'Drag and drop a file here or click', removeText: 'Remove', imageFileText: 'Drag and drop or click to replace'} Allows one to set some custom text inside a file upload component [customText]="customTextTranslation"

Outputs

Name Type Description Example
fileAdded EventEmitter<File> Event fired when a new file is added (fileAdded)="onFileAdd($event)"
fileRemoved EventEmitter<any> Event fired when a 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 the @ViewChild decorator to get access to MdbFileUploadComponent methods

@ViewChild('uploader', { static: true }) uploader: MdbFileUploadComponent

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