Skip to content
Provides a directive for the Uploadcare widget.
Branch: master
Clone or download
Pull request Compare This branch is 32 commits ahead of ericthelast:master.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.travis.yml Add the travis config Feb 8, 2017
HISTORY.md Update HISTORY.md Sep 13, 2015
LICENSE Initial commit Jul 15, 2014
README.md Add link to new angular wrapper to readme Feb 8, 2018
angular-uploadcare.js Add the module wrapper Feb 7, 2017
bower.json Update bower.json Sep 13, 2015
karma.config.js Add karma for run tests Feb 8, 2017
package.json Add npm scripts for test Feb 8, 2017

README.md

angular-uploadcare

Build Status

Provides a directive for the Uploadcare Widget.


Angular 2+ wrapper for Uploadcare Widget: https://github.com/uploadcare/ngx-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.

Install

Bower

bower install angular-uploadcare

Usage

  • Install Uploadcare Widget and add it to your page or bundle.
  • Add angular-uploadcare.js to your page or bundle.
  • Add ng-uploadcare as a dependency for your app.
  • Insert the uploadcare-widget directive into your template file:
<input
  uploadcare-widget
  ng-model="object.image.info.uuid"
  data-public-key="YOURKEYHERE"
  data-tabs="file url"
  data-images-only="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 to
  • on-upload-complete Fires once the file has been uploaded (and cropped if set). This function will receive the file object from Uploadcare
  • value Used to set the value for the input. Useful when you want to prepopulate the input value from elsewhere

Upgrade guide

0.1.x -> 0.2.0

Directive is based on attribute instead of element now, so you should just replace <uploadcare-widget> with <input uploadcare-widget>

Contribution

Bring it on! I'll gladly accept PR's that are for the greater good of the module.

License:

MIT Baby!

You can’t perform that action at this time.