Data Import
The Data Import Plugin for FireCMS enables you to import collection data from JSON, CSV, XLSL (Excel) files directly into your FireCMS application. This plugins provide an interface where users can upload files and map the existing data to the collection properties. This makes it very convenient to move data from one service to another and convert data into the right data types in the database.
The plugin is able to do automatic conversion of some data types such as dates.
The import feature can be also used within the collection editor plugin. In the collection editor, you can create new collections from a data file. It will be able to understand your data structure correctly, and even infer types such as as dates or enums (even if they are stored as strings).
Installation
First, install the Data Import Plugin package:
yarn add @firecms/data_import
Configuration
Integrate the Data Import Plugin using the useImportPlugin
hook. You can optionally provide ImportPluginProps
to customize its behavior.
ImportPluginProps
onAnalyticsEvent
: A callback triggered on import-related analytics events.- Type:
(event: string, params?: any) => void
- Default:
undefined
- Type:
Hook Usage
Use the useImportPlugin
hook to create the import plugin and include it in the FireCMS configuration.
Example: Integrating the Data Import Plugin
import React from "react";
import { CircularProgressCenter, FireCMS, useBuildModeController } from "@firecms/core";
import { useFirebaseStorageSource } from "@firecms/firebase";
import { useImportPlugin } from "@firecms/data_import";
export function App() {
const importPlugin = useImportPlugin({
onAnalyticsEvent: (event, params) => {
console.log(`Import Event: ${event}`, params);
// Integrate with your analytics service if needed
},
});
return (
<FireCMS
plugins={[
importPlugin,
// ... rest of your plugins
]}
/*... rest of your configuration */
>
{({ context, loading }) => {
// ... your components
}}
</FireCMS>
);
}
export default App;
Using the Import Functionality
After integration, the import feature is available within your collection views. Users can upload JSON or CSV files to populate the collections.
Steps to Import Data
- Navigate to a Collection: Open the desired collection in your FireCMS application.
- Initiate Import: Click on the Import action in the collection actions toolbar.
- Upload File: Select and upload the JSON or CSV file containing the data.
- Data Type Mapping: Select the data types and how your data should be mapped to the current structure.
- Data Processing: The plugin processes the file and adds the data to your collection.
Types
ImportPluginProps
Defines the properties for the useImportPlugin
hook.
export type ImportPluginProps = {
onAnalyticsEvent?: (event: string, params?: any) => void;
}
ImportAllowedParams
Provides context for determining import permissions.
export type ImportAllowedParams = {
collectionEntitiesCount: number;
path: string;
collection: EntityCollection;
};
Example: Tracking Imports with Google Analytics
const importPlugin = useImportPlugin({
onAnalyticsEvent: (event, params) => {
if (window && window.gtag) {
window.gtag('event', event, params);
}
},
});