File upload

Angular Bootstrap 5 File upload plugin

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

Angular File upload plugin built with Bootstrap 5, Angular and Material Design. Many customization options like custom height, max size, confirmation message, and much more.

Note: Read the API tab to find all available options and advanced customization

Basic example

Use mdb-file-upload selector to render the file upload component.

        
            
            <mdb-file-upload></mdb-file-upload>

Default message example

By using [defaultMsg] input you can set main message of the file upload.

        
            
            <mdb-file-upload [defaultMsg]="'custom message'"></mdb-file-upload>

Custom height example

By using [height] input you can set its custom height.

        
            
            <mdb-file-upload [height]="500"></mdb-file-upload>

Max size

By using [maxFileSize] input you can set max size of a file.

        
            
            <mdb-file-upload [maxFileSize]="2"></mdb-file-upload>

Default value

By using [defaultPreview] input you can set default file in the file upload element. 

        
            
            <mdb-file-upload
              [defaultPreview]="'https://mdbootstrap.com/img/Photos/Others/images/89.webp'"
            ></mdb-file-upload>

Disable

By using [disabled] input you can disable the component.

        
            
            <mdb-file-upload [disabled]="true"></mdb-file-upload>

Accept formats

By using [acceptedExtensions] input you can set allowed file types.

        
            
            <mdb-file-upload [acceptedExtensions]="'image/*, .pdf'"></mdb-file-upload>

Disabled remove button

By using [removeBtnDisabled] input you can remove "Remove button".

        
            
            <mdb-file-upload [removeBtnDisabled]="true"></mdb-file-upload>

Multiple files

By using [multiple] input you can allow to upload more than single file.

        
            
            <mdb-file-upload [multiple]="true"></mdb-file-upload>

Multiple with files limit

By using [maxFileQuantity] input you can set limit of uploaded files.

        
            
            <mdb-file-upload [multiple]="true" [maxFileQuantity]="3"></mdb-file-upload>

File upload - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

        
            
     npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/file-upload

Import

        
            
          import { MdbFileUploadModule } from 'mdb-angular-file-upload';
          …
          @NgModule ({
            ...
            imports: [MdbFileUploadModule],
            ...
          })
        
        
    
        
            
        @import 'mdb-angular-file-upload/scss/file-upload.scss';

Inputs

Name Type Default Description
acceptedExtensions string | null null Allows you to set specific file formats
defaultPreview null / string null Allows you set default file
defaultMsg string 'Drag and drop a file here or click' Changes text of default message
disabled boolean false Makes drag and drop disabled
disabledRemoveBtn boolean false Allows you to disabled remove button
formatError string 'Your file has incorrect file format (correct format(s) ~~~)' Changes text of format's error (add '~~~' to show allowed formats)
height null / number null Changes height of dropzone
mainError string 'Ooops, something wrong happended.' Changes text of main error message
maxFileQuantity number Infinity Allows you to upload specific number of files
maxFileSize number Infinity Changes allowed file max size
maxSizeError string 'Your file is too big (Max size ~~~)' Changes text of size's error (add '~~~' to show value of max size)
multiple boolean false Allows you to upload more than single file
previewMsg string 'Drag and drop or click to replace' Changes text of file's preview
removeBtn string 'Remove' Changes text of remove button

Outputs

Name Type Description
fileAdded EventEmitter<File[]> Event fired when a file is uploaded.
fileRemoved EventEmitter<File> Event fired when a file is removed.
uploadError EventEmitter<MdbFileUploadError[]> Event fired when uploaded file has wrong format or wrong size. 
        
            
            <mdb-file-upload (fileAdded)="onFileAdded($event)"></mdb-file-upload>                             
            
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              onFileAdded(event: File[]) {
                console.log('file added', event);
              }
            }

Methods

Name Description Example
reset Manually resets the plugin. fileUpload.reset() 
        
            
            <mdb-file-upload #fileUpload></mdb-file-upload>
            <button class="btn btn-danger" (click)="handleClick()">
              Reset file upload
            </button>            
            
        
    
        
            
            import { Component, ViewChild } from '@angular/core';
            import { MdbFileUploadComponent } from 'mdb-angular-file-upload';
            
            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              @ViewChild('fileUpload') fileUpload!: MdbFileUploadComponent;
            
              handleClick(): void {
                this.fileUpload.reset();
              }
            }

Advanced types

MdbFileUploadError

        
            
            interface MdbFileUploadError {
              type: string;
              message: string;
            }