❀Nuclear Power Manager

    angular-uploader
    TypeScript icon, indicating that this package has built-in type declarations

    8.7.0Β β€’Β PublicΒ β€’Β Published

    Angular Uploader

    Angular File Upload Widget
    (With Integrated Cloud Storage)



    Twitter URL

    Get Started β€” Try on StackBlitz

    Upload Widget Demo

    100% Serverless File Upload Widget
    Powered by Upload.io


    DMCA Compliant β€’ GDPR Compliant β€’ 99.9% Uptime SLA
    Supports: Rate Limiting, Volume Limiting, File Size & Type Limiting, JWT Auth, and more...




    Installation

    Install via NPM:

    npm install angular-uploader uploader

    Or via YARN:

    yarn add angular-uploader uploader

    Initialization

    Add the UploaderModule to your app:

    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 {}

    Components & Directives

    Choose one of these options:

    Option 1: Create an Upload Button β€” Try on StackBlitz

    The uploadButton directive displays a file upload modal on click.

    Inputs:

    • uploader (required): an instance of the Uploader class.
    • uploadOptions (optional): an object following the UploadWidgetConfig interface.
    • uploadComplete (optional): a callback containing a single parameter β€” an array of uploaded files.
    import { Component } from '@angular/core';
    import { Uploader, UploadWidgetConfig, UploadWidgetResult } from 'uploader';
    
    @Component({
      selector: 'app-root',
      template: `
        <a href="{{ uploadedFileUrl }}" target="_blank">{{ uploadedFileUrl }}</a>
        <button
          uploadButton
          [uploadComplete]="onComplete"
          [uploadOptions]="options"
          [uploader]="uploader"
        >
          Upload a file...
        </button>
      `,
    })
    export class AppComponent {
      uploader = Uploader({
        apiKey: 'free', // <-- Get production-ready API keys from Upload.io
      });
      options: UploadWidgetConfig = {
        multi: false,
      };
      onComplete = (files: UploadWidgetResult[]) => {
        this.uploadedFileUrl = files[0]?.fileUrl;
      };
      uploadedFileUrl = undefined;
    }

    Option 2: Create a Dropzone β€” Try on StackBlitz

    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 UploadWidgetConfig 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, UploadWidgetConfig, UploadWidgetResult } 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 = Uploader({ 
        apiKey: "free" 
      });
      options: UploadWidgetConfig = {
        multi: false
      };
      // 'onUpdate' vs 'onComplete' attrs on 'upload-dropzone':
      // - Dropzones are non-terminal by default (they don't have an end
      //   state), so by default we use 'onUpdate' instead of 'onComplete'.
      // - To create a terminal dropzone, use the 'onComplete' attribute
      //   instead and add the 'showFinishButton: true' option.
      onUpdate = (files: UploadWidgetResult[]) => {
        alert(files.map(x => x.fileUrl).join("\n"));
      };
      width = "600px";
      height = "375px";
    }

    The Result

    The callbacks receive a Array<UploadWidgetResult>:

    {
      fileUrl: "https://upcdn.io/FW25...",   // URL to use when serving this file.
      filePath: "/uploads/example.jpg",      // File path (we recommend saving this to your database).
        
      editedFile: undefined,                 // Edited file (for image crops). Same structure as below.
    
      originalFile: {
        fileUrl: "https://upcdn.io/FW25...", // Uploaded file URL.
        filePath: "/uploads/example.jpg",    // Uploaded file path (relative to your raw file directory).
        accountId: "FW251aX",                // Upload.io account the file was uploaded to.
        originalFileName: "example.jpg",     // Original file name from the user's machine.
        file: { ... },                       // Original DOM file object from the <input> element.
        size: 12345,                         // File size in bytes.
        lastModified: 1663410542397,         // Epoch timestamp of when the file was uploaded or updated.
        mime: "image/jpeg",                  // File MIME type.
        metadata: {
          ...                                // User-provided JSON object.
        },
        tags: [
          "tag1",                            // User-provided & auto-generated tags.
          "tag2",
          ...
        ]
      }
    }

    Full Documentation

    Angular Uploader is a wrapper for Uploader β€” see the Uploader Docs πŸ“–

    Where are my files stored?

    Uploader uses Upload.io as a file storage & file hosting backend.

    Upload.io benefits developers with:

    • Zero Setup (Start uploading in the next few minutes!)
    • Pre-Integrated Storage (All you need is an Upload API key)
    • Fast File Hosting (Worldwide CDN, 300 Nodes)
    • Powerful Rules Engine (Rate Limiting, Traffic Limiting, IP Blacklisting, Expiring Links, etc)
    • File Transformations (Image Resizing, Cropping, Optimization, etc)

    πŸ”§ Can I bring my own file storage?

    Yes! Upload.io supports custom S3 buckets.

    You still need an Upload.io account to use the widget.

    Contribute

    If you would like to contribute to Uploader:

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

    License

    MIT

    Install

    npm i angular-uploader

    DownloadsWeekly Downloads

    2,617

    Version

    8.7.0

    License

    MIT

    Unpacked Size

    72.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • upload-io