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.

Drag and drop a file here or click

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

    Default message example

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

    custom message

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

      Custom height example

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

      Drag and drop a file here or click

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

        Max size

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

        Drag and drop a file here or click

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

          Default value

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

          Drag and drop a file here or click

            89.webp

            Drag and drop or click to replace

            <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.

            Drag and drop a file here or click

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

              Accept formats

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

              Drag and drop a file here or click

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

                Disabled remove button

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

                Drag and drop a file here or click

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

                  Multiple files

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

                  Drag and drop a file here or click

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

                    Multiple with files limit

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

                    Drag and drop a file here or click

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