Webmasters Gallery

A great developer tool takes a painful task that would normally be a developer’s entire job, and makes it a pleasure to do. As a personal example, I’ve needed to build an image uploading experience many times in the past. I’ve hand-coded them and experienced far too much pain doing that. Then I used Filestack and it made everything not only much easier, but better.

You know what’s way harder than image uploads? Spreadsheet imports. Why? Because when users are uploading a spreadsheet, they aren’t just hosting the file — they are importing the data inside the spreadsheet, and that is a much trickier project. Fields need to get mapped to the right place. Bad data needs to be fixed in the back end. And everything needs to be fast and intuitive. Enter Flatfile. With their core product, Portal, you’ll never have to build your own spreadsheet importer again, thank god.

Allow me to walk you though this.

Your user has some data.

Let’s say you’re building a web software product that does some super useful thing. Who knows, say, it helps with automated marketing emails or something. Your customers want to import some of their customer data into your app so they can get started using it. They might have this data in a spreadsheet (e.g. a .csv or .xls file) because spreadsheets are a universal data transfer format (e.g. maybe the customer exported their data from another product).

You need to build an import experience.

Your web app won’t be nearly as useful and valuable to your customers if they can’t move their data into it quickly and easily. So you set out to build an intuitive import experience. You’re a developer, so you can do this. You build a file upload component. You build a file parser. You write docs about how it all works and your importer’s data expectations. Well, that’s how it could go, but you’re looking at weeks if not longer of development time, and the end result will be (I promise) lackluster. It probably won’t have robust error handling. It won’t have a polished UI. It won’t have countless hours of UX refinements from testing the complete experience.

Time to outsource it.

What if, instead of all that work, we could just write…

<FileImporter config={config} />

That’s basically what Flatfile does! Here’s a demo right here, that’s got enough complexity for you to really see what it’s capable of:

Before you ask… is it secure? Yes. GDPR compliant? Yes. SOC 2 Type 1? Yes. HIPAA? Yes. Can you run it on your own boxes? Yes.

Here’s an elegant import experience.

The user clicks a button and they get a full-page import experience where they can import their spreadsheet or manually enter data.

Your app will have requirements for what kind of data it is expecting, which you’ll configure. This importer will then look at the format of the customer’s data, and allow them to map over the fields you need, correctly, the first time.

Uh oh! There is some missing data. Flatfile does a wonderful job of highlighting exactly what that is. The customer has the option to fix it during an import. No need to re-import their CSV file. Users really have an intuitive opportunity to clean up the data and understand exactly what is going on. This would be extremely non-trivial to build yourself.

They can fix the problems, or just discard the bad data and proceed with importing.

And you’ll get nice clean JSON data out of that interaction for your app to use.

Build vs. buy?

You always gotta weigh these things when you’re building software products. In my experience, you better be really damn sure when you pick build instead of buy. I heavily weigh toward buy, particularly when what I’m buying is secondary to what I’m building. I feel that way because I made the mistake of building far too many times.

Most of us aren’t building uploader apps — we’re building some app that just needs customers to import data. I’d much rather let someone else get that part right while I get my part right. Me? I’d use Flatfile for spreadsheet importing in a heartbeat.

The post A Spreadsheet Importer You’ll Enjoy Using appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.