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 Then, add the
dromo-uploader-angular.bash Terminal npm install dromo-uploader-angularDromoUploaderModule 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'
};
}
// 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",
};
}