luid-image-picker

An input for images that allow the user to upload its own picture and allow to crop it

Features

Use ng-model like an input field
Supports ng-change and ng-disabled
Posts the uploaded image to /api/v3/files, so you dont have to embarass yourself with how to upload stuff to lucca
Display a modal to alow the user to crop the image he wants to upload
Takes all the space in its parent so ypu can use it for any kind of picture (portrait, scenery, ...)

Supported arguments:

ng-model: self explanatory
ng-change: self explanatory
is-disabled: if true, will display the picture but not allow uploading/cropping of a new one
cropping-ratio: the ratio to use in the cropping modal
cropping-disabled: will not display the cropping modal
placeholder-url: the image to display if the model is undefined, if none is defined, will use /static/common/images/placeholder-pp.png

Usage:

<luid-image-picker ng-model="image"></luid-image-picker>
<luid-image-picker ng-model="image" is-disabled="true" ng-change="changed()"></luid-image-picker>

Reroute all calls to https:// authenticate authenticated authenticate to be able to upload pictures

Basic use: the containing div of the second one is way larger. The second one is disabled and has a different placeholder.

Cropping disabled and ng-change

ng-change has been called {{ changeCnt }} times.

With a cropping ratio