How to import CSV files in Django via JavaScript with UseCSV

If you're a Django developer looking to integrate CSV importing 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 CSV files.

Common problems includes:

• parsing errors
• inconsistent data
• missing data
• invalid data

This is where UseCSV can help reduce the friction of development.

What is UseCSV?

CSV is a simple file format that is used to store tabular data, such as a spreadsheet or database. A CSV file consists of a series of data records, with each record consisting of one or more fields, separated by commas.

CSV is a popular format for data exchange because it can be easily read and written by many different types of software. For example, a CSV file can be imported into a spreadsheet program such as Microsoft Excel or Apple Numbers, or it can be used as the input for a database import.

UseCSV is a SaaS tool that allows you to easily convert your data into JSON format. With UseCSV, you can quickly and easily export your data from Excel, Numbers, or any other spreadsheet program, and import it into another program or database via webhook.

All you need is done for you and features include:

• validation rule preconfiguration
• security first platform for integration to keep data safe
• ability to handle large import files
• receive import data as a webhook or callback
• automatic column matching
• intuitive frontend CSV import experience

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 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 is a preconfigured importer called 'My First Importer'. Click on the View to configure your importer. Here is an example of what this looks like:

There are four main fields that are available within the importer and they are:

• the 'Key' field - this field contains the API key for your specific importer.
• the 'Name' field - this field lets you configure the name of your importer.
• the 'Enable Webhook & Save Data' toggle - this lets you toggle between sending CSV content for us to process or, for security, compliance, or your own technical reasons, processing the data on your own servers using UseCSV. When toggled off, only the metadata is sent to UseCSV. The contents of the uploaded file will not be sent.
• the 'Webhook URL' field - this field lets you determine where your imported data is sent.

Beneath these four fields is the Column selection. This section contains the data model for the importer. To add a new column, click on Add Column button located at the top of the Columns section. There is no limit to how many columns you can create.

Here is a screenshot of the Add Column interface for UseCSV.

That is basically it for UseCSV's configuration panel.

Add CSV import to your JavaScript Django app

Since Django is both frontend and backend, we can use UseCSV's JavaScript library to implement the CSV import button. A common way to add JavaScript to a Django project is to include the static files in the project's static folder and then reference them in the templates.

Here are the steps to do this for UseCSV.

Step 1: Create the static directory

In order to add JavaScript libraries to your Django project, you need to create a directory named static/js in your project's root directory.

Once this is completed, open your project's settings.py file and add the following line to the end of the file:

STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ]

This tells Django to look for static files in the "static" directory.

Step 2: Download UseCSV's library

Download and place UseCSV's file inside static/js directory. You can do this via npm.

You can install usecsv npm package to a specific location by using the --prefix option. Here is an example of using npm for Laravel:

npm install --prefix static/js @usecsv/js

Alternatively, you can directly reference the CDN in your project's templates:

<script src="https://unpkg.com/@usecsv/js/build/index.umd.js"></script>

Step 3: Add the script reference and CSV import button

Create another JavaScript file called main.js inside your static/js directory. In this file, we are going reference UseCSV library and handle the click event for the import button.

To do this, we are going to create a function called importData().

import useCsvPlugin from "@usecsv/js";

function importData(){
  useCsvPlugin({
    importerKey: "your-importer-key",
    user: { userId: "12345" },
    metadata: { anotherId: "1" },
   });
}

UseCSV accepts 3 parameters: importerKey, user, and metadata. The 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.

Now, open your project's templates and load the JavaScript library using the following code:

<script src="{% static 'js/main' %}"></script>

The next step is to create an import button that invokes the importData() function when clicked.

<button type="button" id="import-data-button">
    Import Data
</button>

Once your Django project compiles, clicking on the frontend will pop up a modal with UseCSV's import functionalities.

Receive data from imports

In this part of the tutorial, we will create a simple Django web server that can receive requests and output responses. We will also show you how to configure your Django web server to run on a specific port.

You can create a new project using the django-admin command:

django-admin startproject mysite

This will create a new directory called mysite that contains all the files necessary for a Django project.

Next, you need to create a new file called views.py in the mysite directory. This file will contain the code for your Django views. In this file, you will need to import the render function from the django.shortcuts module:

from django.shortcuts import render

Then, you will need to create a view function that takes an HTTP request and returns an HTTP response:

def index(request):
    return render(request, 'index.html')

In this view function, we are using the render function to return an HTML template called index.html. This template will be located in the mysite/templates directory.

Next, you need to create a file called urls.py in the mysite directory. This file will contain the code for your Django URL routes. In this file, you will need to import the path function from the django.urls module:

from django.urls import path

Then, you will need to create a URL pattern that maps to the view function you created in views.py:

urlpatterns = [
    path('', views.index, name='index'),
]

Finally, you need to edit the mysite/settings.py file and add the following code at the end of the file:

ALLOWED_HOSTS = ['*']

This will allow your Django webserver to accept requests from any host.

Now, you can start your Django webserver by running the following command:

python manage.py runserver

You can also specify the port that your Django webserver should run on by specifying the --port option:

python manage.py runserver --port=8000

By default, the Django webserver will only accept requests from localhost. If you want to allow requests from other computers, you can use the --allow-hosts option:

python manage.py runserver --allow-hosts=*

To connect this webhook endpoint up with your UseCSV importer, you can use a free Cloudflare tunnel by downloading it from Cloudflare (Windows). If you're using Windows, open up Powershell and run the following:

cloudflared.exe tunnel localhost:8080

For macOS, you can use brew to download and run Cloudflare.

brew install cloudflare/cloudflare/cloudflared

To run free Cloudflare tunnel on MacOS:

cloudflared tunnel localhost:8080

If your Cloudflare commands are successful, you will get something like this:

2022-01-29T23:40:16Z INF Thank you for trying Cloudflare Tunnel. Doing so, without a Cloudflare account, is a quick way to experiment and try it out. However, be aware that these account-less Tunnels have no uptime guarantee. If you intend to use Tunnels in production you should use a pre-created named tunnel by following: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps
2022-01-29T23:40:16Z INF Requesting new quick Tunnel on trycloudflare.com...
2022-01-29T23:40:17Z INF +--------------------------------------------------------------------------------------------+
2022-01-29T23:40:17Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2022-01-29T23:40:17Z INF |  https://wan-attract-tin-exposure.trycloudflare.com                                        |
2022-01-29T23:40:17Z INF +--------------------------------------------------------------------------------------------+
2022-01-29T23:40:17Z INF Cannot determine default configuration path. No file [config.yml config.yaml] in [~/.cloudflared ~/.cloudflare-warp ~/cloudflare-warp]
2022-01-29T23:40:17Z INF Version 2022.1.2
2022-01-29T23:40:17Z INF GOOS: windows, GOVersion: go1.17.5, GoArch: amd64
2022-01-29T23:40:17Z INF Settings: map[protocol:quic]
2022-01-29T23:40:17Z INF cloudflared will not automatically update on Windows systems.
2022-01-29T23:40:17Z INF Generated Connector ID: 9d4b898f-ceab-43fa-bab6-bee8f90ef3e2

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 Laravel console log for the webhook payload. UseCSV will automatically split up the webhooks into batches of 1,000 rows.

Where to from here?

UseCSV is the perfect tool for parsing and manipulating CSV data. With UseCSV, you can easily avoid common problems like incorrect data formatting, parse errors, and incomplete data. UseCSV is constantly being updated with the latest features and security patches, so you can always be confident that your application is secure.

Integrating UseCSV into your project is quick and easy - check out the documentation for more information, or start using UseCSV today to see how simple it is to get started.