Topic: how to do image upload using modal
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="false">
<divclass="modal-dialog"role="document">
<divclass="modal-content">
<divclass="modal-header text-center">
<h4class="modal-title w-100 font-weight-bold">Sign in</h4>
<buttontype="button"class="close"data-dismiss="modal"aria-label="Close">
<spanaria-hidden="false">×</span>
</button>
</div>
<divclass="modal-body mx-3">
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 3"
[resizeToWidth]="128"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(loadImageFailed)="loadImageFailed()"
></image-cropper>
</div>
<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>
</div>
</div>
</div>
</div>
Arkadiusz Idzikowski staff answered 6 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:
Damian Gemza staff answered 6 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,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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