Topic: how to do image upload using modal

tola free asked 4 years ago

<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
<divclass="modal-header text-center">
<h4class="modal-title w-100 font-weight-bold">Sign in</h4>
<divclass="modal-body mx-3">
[aspectRatio]="4 / 3"
<divclass="modal-footer d-flex justify-content-center">
<inputtype="file"class="btn btn-default"value="select image"(change)="fileChangeEvent($event)"/>
<buttonclass="btn btn-default">Preview image</button>
<buttonclass="btn btn-default">upload image</button>
<buttonclass="btn btn-default">cancel</button>
<buttonclass="btn btn-default">Reset</button>

Damian Gemza staff answered 4 years ago

Dear @tola 

File Upload component is available in our MDB Angular Pro version. If you need this component, and you're a free user, you have two ways:

1st (preferred) - Please buy a license for MDB Angular Pro - you'll get every one of our components to use.

2nd (not preferred) - Search on the Internet for some package which allows you to do a file upload.

Best Regards,


Arkadiusz Idzikowski staff answered 4 years ago

Dear tola,

You would need to use the code for Angular version, but file input is a pro component.

You can find all information in our documentation:


File input

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: dell inspiron
  • Browser: uc web
  • OS: windows
  • Provided sample code: Yes
  • Provided link: No