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

​
Step By Step Guide

Our SDK for Angular currently supports Angular versions 13-17. Have a look at our live example for inspiration.
1

Installation

To install the Dromo Angular SDK in your application, just install the NPM package dromo-uploader-angular.
bash Terminal npm install dromo-uploader-angular
Then, add the DromoUploaderModule to your imports.
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DromoUploaderModule } from 'dromo-uploader-angular';
import { AppComponent } from './app.component'; // Assuming AppComponent is in app.component.ts

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

Usage

The DromoUploaderModule provides the lib-dromo-uploader component. You can create a wrapper component to provide its configuration. Below are examples of how you might set up your component: one for a full manual configuration, and another using a schema defined in Dromo’s Schema Studio.
// my-uploader.component.ts
import { Component } from '@angular/core';
import {
  DromoMethods,
  IColumnHook,
  IColumnHookInput,
  IRowDeleteHook,
  IRowHook,
  IStepHook,
  IUploadStepData,
  IBulkRowHook,
  IBeforeFinishCallback
} 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);
        return values.map(({ value, index }) => ({ value: index + value, index }));
      }
    }
  ];
  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'
  };
}