Jun 1, 2022
If you're a Django developer looking to integrate CSV import into your app, UseCSV is a great option. It's easy to use and can help you avoid some of the common problems associated with building CSV import yourself.
What is UseCSV?
UseCSV is an all-in-one CSV import product that gives you a delightful CSV importer experience for your users. All you have to do is drop-in the UseCSV JS library, and create a webhook endpoint to receive uploads. This takes away all the headaches of building CSV import functionality in-house .
Here's a sneak peak of what the import experience will be for your users (this opens in a modal inside your app):
Here are just a few of the awesome features of UseCSV:
- Frontend libraries which add the UseCSV import button and modal to your app
- Receive imported data as a webhook or callback
- Automatic smart column matching
- Supports CSV and all Excel formats (xlsx, xls, xlt), including legacy Excel versions
- Handles large import files
- Includes a library of common validation rules to choose from
Without further ado, let's get started!
Setting up your UseCSV account
To set up your free UseCSV developer account, simply follow this link - no credit card details required - just an email address or Gmail account. Once completed, you will be automatically directed the to UseCSV dashboard.
This dashboard will give you an overview of your CSV importers, a link to the documentation, API keys, account settings, and billing. In the top right corner is the 'Add Importer' button. This button will give you the ability to create a new data model for your CSV imports.
To edit a current data model, click on the
View button that is on the same row as your selected importer. When you create an account, there an importer already created for you called 'My First Importer'. Click
View to configure visit the importer settings:
Head down to the Column section, where you can setup the data model for this importer.
Click Add Column to create a new column, for example you could add a first_name column to begin with. Create as many columns as you like.
Add CSV import to your Django app
Including the UseCSV JS library into your Django front end is just like importing any JS lib.
Simply add in the script tag to the UseCSV JS (see the docs. Anyhwere in your app, or in your app's <head> add:
Then you can create an onclick importData() helper function like below, using whichever frontend framework you're using (also see the docs).
UseCSV accepts 3 parameters:
importerKey is the only compulsory parameter and enables you to connect with the data model you previously created.
user allows you to pass through user data that can help your endpoint identify who the import data belongs to.
metadata accepts objects, meaning that you can pass any additional data with your import.
Step 3: Add the CSV import button
The next step is to create an import button that invokes the
importData() function when clicked.
Start your Django project, and try clicking the Import Data button. A pop up modal with UseCSV's import process will appear.
Receive webhook data from imports
UseCSV will send imported data to the Webhook URL specified in the UseCSV admin. We need to create a webhook endpoint in your Django app to receive the requests.
Create a new view like below (note they we have previously added
WEBHOOK_SECRET to the app settings, using the value shown in the UseCSV admin):
We can add a URL mapping to our view with the standard path():
To connect this locally running webhook endpoint up with your UseCSV importer, you can use a free Cloudflare tunnel:
If your Cloudflare commands are successful, you will get something like this:
Use the tunnel link and paste it into the Webhook URL field to finish connecting everything up.
We're ready to try your first import
Make sure your Django server is running. Go to your localhost frontend and click on
Import Data to open the importer modal.
Upload your CSV file, match the columns and then click import.
Watch your console log for the webhook payload. UseCSV will automatically split up the webhooks into batches of 1,000 rows.
Where to from here?
UseCSV makes it simple to add delightful CSV import to your app. There are many powerful features under the hood including themes and validation rules. Checkout the docs for more info.