appvital-file-upload-widget-api-angular

Angular wrapper library to quickly integrate Appvital File picker & cloud uploader in your application with just few lines of code.

Core Features

• Drag & Drop or Copy & Paste any file
• Pick files from multiple sources including popular online file shares
• Upload files straight to your own cloud storages: Amazon S3 bucket, Azure Blob container
• Manage large file uploads efficiently using multipart chunk uploads.
• Crop, rotate, flip and enhance photos to perfection with built-in photo editor
• Generate thumbnails, apply text or image watermarks
• Complete control with configurable options and much more

Demo/Examples

Angular version of all examples are included in this wrapper library.

See file picker in action here with example configurations demonstrating various features.

Quick Start

Install using npm:

npm install @appvitalinc/file-upload-widget-api-angular --save

Include ApvFilepickerModule in app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { ApvFilepickerModule } from "@appvitalinc/file-upload-widget-api-angular";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ApvFilepickerModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

UI code in .html file

<button apvFilepicker apikey="YOUR_API_KEY">Open Filepicker</button>

Available inputs

Name	Type	Required	Default	Description
apiKey	String	True		Filepicker api key
options	ApvFilePickerOptions			Check ApvFilePickerOptions

Callbacks

Name	Function	Required	Default	Description
onOpen	()			Fires when filepicker has been initialized and is ready.
onClose	()			Fires when filepicker popup is closed.
onCancel	()			Fires when filepicker is canceled.
onUploadStarted	()			Fires when file(s) uploading starts.
onUploadDone	(ApvFilePickerResponse)			Fires when uploading completes.
onUploadError	(error)			Fires when file(s) upload is failed.

Examples

Below you can find some quick basic implementations.

Open picker - Single file upload

component.ts

import { ApvFilePickerResponse, ApvFilePickerOptions } from '@appvitalinc/file-upload-widget-api-angular';

export class AppComponent implements OnInit {
  apikey: string;
  options: ApvFilePickerOptions;

  ngOnInit() {
    this.apikey = "YOUR_API_KEY";
    this.options = {
      multiple: false,
      outputfileoptions: {
        width: 500,
        height: 281,
        resizetype: "fit",
        resizeconflict: "pad",
        storage: [
          {
            name: "YOUR_STORAGE_CODE_ALIAS",  //add one at your account dashbaord
            path: "YOUR_STORAGE_FOLDER_PATH", //optional
          },
        ],
      },
      inputfileoptions: {
        allowedfileformats: "jpg,jpeg,gif,bmp,png,webp,zip,pdf",
        maxfilesize: 700000000,
        note:
          "File size restricted to: 10000 KB / File type restricted to: JPG, PNG, JPEG, PDF, DOC, DOCX, TXT, XML and ZIP.",
      },
    };
  }

  onOpen() {
    console.log("Modal open");
  }

  onClose() {
    console.log("Modal Close");
  }

  onCancel() {
    console.log("On Cancel");
  }

  onUploadDone(data: ApvFilePickerResponse) {
    console.log("onUploadStart", data);
  }

  onUploadStart() {
    console.log("onUploadStart");
  }

  onUploadError(error: string) {
    console.log("onUploadError", error);
  }
}

component.html

<button
  apvFilepicker
  [apikey]="apikey"
  [options]="options"
  (onOpen)="onOpen()"
  (onClose)="onClose()"
  (onCancel)="onCancel()"
  (onUploadDone)="onUploadDone($event)"
  (onUploadStarted)="onUploadStart()"
  (onUploadError)="onUploadError($event)"
>
  Open Filepicker
</button>

Documentation

You can find further documentation about available filepicker options and configuration details here at https://appvital.com/docs/file-uploader#Quickstart-Angular

Contributing

Any of your contributions or ideas are more than welcome. Please consider that we follow the conventional commits specification to ensure consistent commit messages and changelog formatting.