{"id":325379,"date":"2020-11-12T07:46:36","date_gmt":"2020-11-12T15:46:36","guid":{"rendered":"https:\/\/css-tricks.com\/?p=325379"},"modified":"2020-11-13T09:43:26","modified_gmt":"2020-11-13T17:43:26","slug":"a-spreadsheet-importer-youll-enjoy-using","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-spreadsheet-importer-youll-enjoy-using\/","title":{"rendered":"A Spreadsheet Importer You’ll Enjoy Using"},"content":{"rendered":"\n

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

You know what\u2019s way harder<\/em> than image uploads? Spreadsheet imports. Why? Because when users are uploading a spreadsheet, they aren\u2019t just hosting the file \u2014 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<\/a>. With their core product, Portal<\/a>, you\u2019ll never have to build your own spreadsheet importer again, thank god.<\/p>\n\n\n\n\n\n\n\n

Allow me to walk you though this.<\/p>\n\n\n

Your user has some data.<\/h3>\n\n\n

Let\u2019s say you\u2019re 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<\/code> or .xls<\/code> file) because spreadsheets are a universal data transfer format (e.g. maybe the customer exported their data from another product).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n

You need to build an import experience.<\/h3>\n\n\n

Your web app won\u2019t be nearly as useful and valuable to your customers if they can\u2019t move their data into it quickly and easily. So you set out to build an intuitive import experience. You\u2019re 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\u2019s data expectations. Well, that\u2019s how it could<\/em> go, but you\u2019re looking at weeks if not longer of development time, and the end result will be (I promise) lackluster. It probably won\u2019t have robust error handling. It won\u2019t have a polished UI. It won\u2019t have countless hours of UX refinements from testing the complete experience.<\/p>\n\n\n

Time to outsource it.<\/h3>\n\n\n

What if, instead of all that work, we could just write\u2026<\/p>\n\n\n\n

<FileImporter config={config} \/><\/code><\/pre>\n\n\n\n
That’s basically what Flatfile<\/a> does! Here’s a demo right here<\/a>, that’s got enough complexity for you to really see what it’s capable of:<\/p>\n\n\n\n