dayton1987 / ngx-uploadcare-widget

Angular 2+ wrapper for Uploadcare Widget

ngx-uploadcare-widget

Angular 2+ wrapper for Uploadcare Widget.

Uploadcare Widget is an HTML5 file uploader which itself is a part of Uploadcare ecosystem.

Install

npm install ngx-uploadcare-widget

Usage

Import the component,

import { UcWidgetComponent } from 'ngx-uploadcare-widget';

Add the component to your module,

@NgModule({
  declarations: [
    ...,
    UcWidgetComponent,
  ],
  ...
})
...

Use it in your template,

<ngx-uploadcare-widget
  images-only="true"
  public-key="YOUR_PUBLIC_KEY">
</ngx-uploadcare-widget>

The component support two widget events: on-change and on-upload-complete, you can handle its as on example below,

<ngx-uploadcare-widget
  images-only="true"
  public-key="demopublickey"
  (on-upload-complete)="yourOnUploadHandler($event)"
  (on-change)="yourOnChangeHandler($event)">
</ngx-uploadcare-widget>

You can read more about this events in docs.

Configuration

Please note: for now the component supports one time initialisation only. If you change any of attributes runtime this will not be affected by the widget. This behavior is temporary and will be fixed in future release.

Supported input attributes

Every attribute corresponds its name described in widget docs but without data- prefix.

• public-key
• multiple
• multiple-max
• multiple-min
• images-only
• preview-step
• crop
• image-shrink
• clearable
• tabs
• input-accept-types
• preferred-types
• system-dialog
• secure-signature
• secure-expire
• value
• cdn-base
• do-not-store

Events

• on-upload-complete
• on-change

Localization

It’s possible that your locale is not available in the widget yet. If that’s the case, contributing your locale might be a good idea. This can be done by forking the main repository and adding a localization file here.

Until that you can use UPLOADCARE_LOCALE_TRANSLATIONS property to use your locale immediately.