⛔ Stop Coding Spreadsheet Imports In JavaScript — Open Source Impler.io Does It For You

I hate handling custom imports, especially spreadsheets. It’s repetitive and boring. I’d rather spend time repositioning my buttons by 1px. I’ll tell you what I use for imports nowadays

We’re running in the world of data. Years ago, people were adding this kind of data manually into the system.

Marketing campaigns produces extensive amount of data. The size of data has grown, the population is grown. We started transferring data between systems. Which are impossible to insert manually!

So usually products has this kind of import functionality, where they provide simple drag and drop box to let user provide CSV or Excel file. And the backend will process it and let the user know that their file is imported successfully, or it’s discarded because it has errors:

But it has limitations in it’s basic form:

• It’s only first step of the import UI
• No way to check for invalid data during upload
• Complex engineering flow
• Lots of missed edge cases
• Big development costs

So instead of building it from scratch, you can use ready-made data import experience. Impler.io is one of them that provides a ready-made CSV and Excel file import experience.

Developer have to create Import in https://web.impler.io to get started with Impler. The import details UI looks something like this:

Import details have four sections,

1. Schema — Provide what fields you want to import.
2. Destination — Provide an API endpoint where you want to receive imported data.
3. Snippet— Step-by-step guide on how to add import widget into your application.
4. Validator — Write a custom code to validate data, like validating unique email in database. You can call your custom API with axios too.
5. Output — Customize the format of data you receive via webhook.

Impler imports files in four phases:

1. Upload — User selects CSV or Excel file.
2. Mapping — Let user check and verify the mapping of column created by user and heading available in imported file.
3. Review — The developer-defined custom and dynamic validations will run and user will see the errors in columns.
4. Complete — The user will be informed that his import is done, the imported records will be available soon.

Once the import is completed, the imported records are sent to the provided endpoint automatically.

Here are some nice features of impler.io:

1. Integrate and release in minutes
2. Ready made set of SDKs
3. Event Hooks to get notified when import is opened, closed, terminated and completed
4. Analytics to see imports done this week, month or year, and details about each import
5. Output formatter feature allows you to format the receiving data the way you need. One can also use it to import the data directly into a third party application
6. Auto-sample Excel file generates a sample Excel file automatically, so user can download it, fill the data in file and import it
7. Data preloading allows filling in the default data in a sample Excel file that is downloaded

I really like how Impler works from the developer experience. It’s easy to integrate with any web app, including React, Vue and Angular. It’s one of the gems that makes development actually better!

If you’d like to learn about more dev tools, subscribe! Cheers!