how to do image upload using modal


Topic: how to do image upload using modal

tola asked 6 years ago

<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">&times;</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:

Modals

File input


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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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