dromo

Check out our developer documentation here

Usage

Install the packge using npm install dromo-uploader-angular

Import module and add to imports

$3

``TypeScript
// app.module.ts

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

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

export class AppModule {}
`

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.

`TypeScript
// 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:
[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!


})

export class MyUploader implements DromoMethods {
licenseKey = "";

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 > 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',
};
}
`

$3

`TypeScript
// app.module.ts

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

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

export class AppModule {}
`

`TypeScript
// my-uploader.component.ts
import { Component } from "@angular/core";
import {
IUser,
IBeforeFinishCallback,
DromoSavedSchemaMethods
} from "dromo-uploader-angular";
@Component({
selector: "app-dromo-importer",
template:
[licenseKey]="licenseKey"
[schemaName]="schemaName"
[user]="user"
[styles]="styles"
[class]="class"
[onCancel]="onCancel"
[onResults]="onResults"
[beforeFinish]="beforeFinish"
[developmentMode]="developmentMode"
class="dromo-importer"
>Import with Dromo! >
,
styleUrls: ["./dromo-importer.component.css"]
})
export class DromoImporterComponent implements DromoSavedSchemaMethods {
schemaName = "demo";
licenseKey = "";
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 {}
}

``