Angular Quickstart

tip

Are you looking for a framework other than Angular? Check the Getting Started guides in the sidebar.

Overview

Our SDK for Angular currently supports Angular versions 13-17.

Have a look at our live example for inspiration.

Installation

To install the Dromo Angular SDK in your application, just install the NPM package dromo-uploader-angular.

npm install dromo-uploader-angular

Then, add the DromoUploaderModule to your imports.

app.module.ts

import { DromoUploaderModule } from 'dromo-uploader-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DromoUploaderModule],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Usage

The DromoUploaderModule provides the Dromo Uploader component, with the selector lib-dromo-uploader.

You may create a wrapper component which provides the Dromo Uploader component with your configuration.

my-uploader.component.ts

import { Component } from '@angular/core';
import {
  DromoMethods,
  IColumnHook,
  IRowDeleteHook,
  IRowHook,
  IStepHook,
  IUploadStepData,
} from 'dromo-uploader-angular';

@Component({
  selector: 'my-uploader',
  template: `
    <lib-dromo-uploader
      [licenseKey]="licenseKey"
      [user]="user"
      [fields]="fields"
      [settings]="settings"
      [rowHooks]="rowHooks"
      [columnHooks]="columnHooks"
      [stepHooks]="stepHooks"
      [rowDeleteHooks]="rowDeleteHooks"
      [styles]="styles"
      [class]="class"
      class="dromo-importer"
      [onCancel]="onCancel"
      [onResults]="onResults"
      [beforeFinish]="beforeFinish"
      [bulkRowHooks]="bulkRowHooks">
        Import with Dromo!
      </lib-dromo-uploader>
  `
})

export class MyUploader implements DromoMethods {
  licenseKey = 'YOUR_LICENSE_KEY_HERE';

  user = { id: 'angular tester' };

  fields = [
    { label: 'first name', key: 'first_name' },
    { label: 'email address', key: 'email' },
  ];

  settings = {
    importIdentifier: 'angular imports',
    developmentMode: true,
  };

  rowHooks: IRowHook[] = [
    (record) => {
      const newRecord = { ...record };
      newRecord.row['first_name'].value =
        record.row['first_name'].value + '!!!';
      return newRecord;
    },
  ];

  rowDeleteHooks: IRowDeleteHook[] = [
    (record) => alert(`deleted ${record.index}`),
  ];

  columnHooks: IColumnHook[] = [
    {
      fieldName: 'email',
      callback: (values: IColumnHookInput[]) => {
        console.log('COLUMN HOOK', values);
        values = values.map(({ value, index }) => ({
          value: index + value,
          index,
        }));
        return values;
      },
    },
  ];

  stepHooks: IStepHook[] = [
    {
      type: 'UPLOAD_STEP',
      callback: (uploader, data) => {
        console.log(
          'STEP HOOK',
          `Filename: ${(data as IUploadStepData).filename}`
        );
      },
    },
  ];

  onCancel = () => alert('Something I said?');

  onResults = (data: any[], metaData: any) => {
    alert(`Submitted ${data.length} records`);
    console.table(data);
    console.log('MetaData', metaData);
  };

  bulkRowHooks: IBulkRowHook[] = [
    (data, _mode) => {
      console.log("in the bulk row hook!");
      return data;
    }
  ];

  beforeFinish: IBeforeFinishCallback = (data, metaData, _instance) => {
    console.log(`${data.length} total rows!`);
    if (metaData.rowsWithError.length > 10) {
      return {
        cancel: true,
        message: "More than ten errors, fix them first!"
      };
    }
    return undefined;
  };

  class = 'dromo-button';

  styles = {
    'background-color': 'rgb(0, 123, 255)',
    border: '1px solid rgb(0, 123, 255)',
    'border-radius': ' 0.25rem',
    color: 'white',
    padding: '15px',
    'text-align': 'center',
    'text-decoration': 'none',
    display: 'inline-block',
    'font-size': '16px',
    'box-shadow': '5px 5px 5px 0px #7F7F7F',
  };
}

Usage: Schema Studio

my-uploader.component.ts

// my-uploader.component.ts
import { Component } from "@angular/core";
import {
  IUser,
  IBeforeFinishCallback,
  DromoSavedSchemaMethods
} from "dromo-uploader-angular";
@Component({
  selector: "app-dromo-importer",
  template: `
    <lib-dromo-uploader
      [licenseKey]="licenseKey"
      [schemaId]="schemaId"
      [user]="user"
      [styles]="styles"
      [class]="class"
      [onCancel]="onCancel"
      [onResults]="onResults"
      [beforeFinish]="beforeFinish"
      [developmentMode]="developmentMode"
      class="dromo-importer"
      >Import with Dromo!</lib-dromo-uploader
    >
  `,
  styleUrls: ["./dromo-importer.component.css"]
})
export class DromoImporterComponent implements DromoSavedSchemaMethods {
  schemaId = "00000000-0000-0000-0000-000000000000";
  licenseKey = "<YOUR LICENSE KEY>";
  user: IUser = { id: "angular tester" };
  developmentMode = true;
  onCancel = () => alert("Something I said?");
  onResults = (data: any[], metaData: any) => {
    alert(`Submitted ${data.length} records`);
    console.table(data);
    console.log("MetaData", metaData);
  };

  beforeFinish: IBeforeFinishCallback = (data, metaData, _instance) => {
    console.log(`${data.length} total rows!`);
    if (metaData.rowsWithError.length > 2) {
      return { cancel: true, message: "More than two errors, fix them first!" };
    }
    return undefined;
  };
  class = "dromo-button";
  styles = {
    "background-color": "rgb(0, 123, 255)",
    border: "1px solid rgb(0, 123, 255)",
    "border-radius": " 0.25rem",
    color: "white",
    padding: "15px",
    "text-align": "center",
    "text-decoration": "none",
    display: "inline-block",
    "font-size": "16px",
    "box-shadow": "5px 5px 5px 0px #7F7F7F"
  };

  ngOnInit(): void {}
}