Provides a directive for the Uploadcare Widget.
Looking for a dead-simple way to integrate image uploading/cropping with your Angularjs project? Then look no further! Uploadcare provides a fantastic widget for uploading images from multiple sources. From their site:
We handle files, so you don’t have to. Uploadcare is a service that helps media creators, businesses and developers store, process and deliver visual content to their clients.
Combine this with the power of Angular and you've got yourself an image uploading solution that's far better than most other offerings.
Note: I am in no way affiliated with Uploadcare. I was looking to add better image uploading to an Angular app and found Uploadcare to be one of the best solutions out there. Since there wasn't a directive for Angular, I decided to make one.
#Usage
- Run
bower install angular-uploadcare
(or manually download/clone and install into your project's directory) - Include bower_components/angular-uploadcare/angular-uploadcare.js
- Include the desired version of the Uploadcare Widget. This directive works with at least version 1.3.1
<script charset="utf-8" src="https://ucarecdn.com/widget/1.3.1/uploadcare/uploadcare-1.3.1.min.js"></script>
- Add
ng-uploadcare
as a dependency for your app - Insert the
uploadcare-widget
directive into your template file:
<uploadcare-widget
ng-model="object.image.info.uuid"
data-public-key="YOURKEYHERE"
data-locale="en"
data-tabs="file url"
data-images-only="true"
data-path-value="true"
data-preview-step="true"
data-clearable="true"
data-multiple="false"
data-crop="400:200"
on-upload-complete="onUCUploadComplete(info)"
on-widget-ready="onUCWidgetReady(widget)"
value="{{ object.image.info.cdnUrl }}"
/>
#Options This directive supports any of the configuration options defined by Uploadcare. In addition, it also supports the following options:
ng-model
The value to bind toon-upload-complete
Fires once the file has been uploaded (and cropped if set). This function will receive the file object from Uploadcarevalue
Used to set the value for the input. Useful when you want to prepopulate the input value from elsewhere
#Contribution Bring it on! I'll gladly accept PR's that are for the greater good of the module.
#License: MIT Baby!