Package Exports

angular-uploader
angular-uploader/package.json

Readme

Angular File Upload Component for Upload.io
(Angular Wrapper for Uploader)

Quick Start — Try Live Demo

To create a file upload button:

npm install angular-uploader

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { UploaderModule } from "angular-uploader";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    UploaderModule // <-- Add the Uploader module here.
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component } from "@angular/core";
import { Uploader, UploaderOptions, UploaderResult } from "uploader";

@Component({
  selector: "app-root",
  template: `
    <button uploadButton 
            [uploadComplete]="uploadComplete" 
            [uploadOptions]="uploadOptions" 
            [uploader]="uploader">
      Upload a file...
    </button>
  `
})
export class AppComponent {
  uploader = new Uploader({ 
    apiKey: "free" // <-- Get production-ready API keys from Upload.io
  });
  uploadOptions: UploaderOptions = {
    multi: false
  };
  uploadComplete = (files: UploaderResult[]) => {
    console.log(files.map(x => x.fileUrl));
  };
}

Installation

Install via NPM:

npm install angular-uploader

Or via YARN:

yarn add angular-uploader

Components & Directives

angular-uploader provides two options for adding a file uploader to your app:

Option 1: `uploadButton` directive

The uploadButton directive causes the element to display a file upload modal on click.

Inputs:

uploader (required): an instance of the Uploader class.
uploadOptions (optional): an object following the UploaderOptions interface.
uploadComplete (optional): a callback containing a single parameter — an array of uploaded files.

import { Component } from "@angular/core";
import { Uploader, UploaderOptions, UploaderResult } from "uploader";

@Component({
  selector: "app-root",
  template: `
    <button uploadButton 
            [uploader]="uploader"
            [uploadOptions]="uploadOptions"
            [uploadComplete]="uploadComplete">
      Upload a file...
    </button>
  `
})
export class AppComponent {
  uploader = new Uploader({ 
    apiKey: "free" 
  });
  uploadOptions: UploaderOptions = {
    multi: false
  };
  uploadComplete = (files: UploaderResult[]) => {
    console.log(files.map(x => x.fileUrl));
  };
}

Option 2: `upload-dropzone` component

The upload-dropzone component renders an inline drag-and-drop file uploader.

Inputs:

uploader (required): an instance of the Uploader class.
options (optional): an object following the UploaderOptions interface.
onComplete (optional): a callback containing the array of uploaded files as its parameter.
onUpdate (optional): same as above, but called after every file upload or removal.
width (optional): width of the dropzone.
height (optional): height of the dropzone.

import { Component } from "@angular/core";
import { Uploader, UploaderOptions, UploaderResult } from "uploader";

@Component({
  selector: "app-root",
  template: `
    <upload-dropzone [uploader]="uploader" 
                     [options]="options"
                     [onUpdate]="onUpdate"
                     [width]="width"
                     [height]="height"> 
    </upload-dropzone>
  `
})
export class AppComponent {
  uploader = new Uploader({ 
    apiKey: "free" 
  });
  options: UploaderOptions = {
    multi: false
  };
  // 'onUpdate' explained:
  // - Dropzones are non-terminal by default (i.e. they don't have an
  //   end state), so we use 'onUpdate' instead of 'onComplete'. 
  // - To create a terminal dropzone, add a 'onComplete' attribute
  //   to the component and add the 'showFinishButton: true' option.
  onUpdate = (files: UploaderResult[]) => {
    console.log(files.map(x => x.fileUrl));
  };
  width = "600px";
  height = "375px";
}

The Result

The callbacks receive a Array<UploaderResult>:

{
  fileUrl: "https://upcdn.io/FW25...",          // The URL to use when serving this file.

  editedFile: undefined,                        // The edited file (if present). Same as below.

  originalFile: {
    accountId: "FW251aX",                       // The Upload.io account that owns the file.
    file: { ... },                              // DOM file object (from the <input> element).
    fileId: "FW251aXa9ku...",                   // The uploaded file ID.
    fileUrl: "https://upcdn.io/FW25...",        // The uploaded file URL.
    fileSize: 12345,                            // File size in bytes.
    mime: "image/jpeg",                         // File MIME type.
    suggestedOptimization: {
      transformationUrl: "https://upcdn.io/..", // The suggested URL for serving this file.
      transformationSlug: "thumbnail"           // Append to 'fileUrl' to produce the above URL.
    },
    tags: [                                     // Tags manually & auto-assigned to this file.
      { name: "tag1", searchable: true },
      { name: "tag2", searchable: true },
      ...
    ]
  }
}

Full Documentation

angular-uploader is an Angular wrapper for uploader.

Please see: Uploader Docs.

Contribute

If you would like to contribute to Uploader:

Add a GitHub Star to the project (if you're feeling generous!).
Determine whether you're raising a bug, feature request or question.
Raise your issue or PR.

License

MIT

angular-uploader