Uploading a CSV File to Postgres using Vue and Laravel
In this post am going to share an experience I had uploading JSON data to Postgres database. Firstly the CSV data should be converted to JSON data, to do so refer to my post here. After you have converted your CSV to JSON it is time to get started with the database part.
Well let’s get codding.
Step 1 : Create sequence in your Postgres, with this created it will assign a primary key automatically.
Step 2 : After the sequence has been created, now create the table with its attributes, which will carry the values from the CSV file.
Step 3: Now that we have a table, it is time to create a function in PostgreSQL, this function will receive the employee_data json data which will be used as reference for the data coming from the CSV file.
Lets name our function uploadEmployees . The uploadEmployees function is expecting JSON objects. In this function the variables are created to represent the CSV file value which are first_name_in, last_name_in, date_of_birth_in, email_in. After the variables have been declared, then declare the JSON object that will be used to loop through all the elements in a JsonData object.
In the function below, the employee_rec loop is used to select all values that are coming from the CSV file, then the variables declared inside the loop are used to point to the columns in the CSV file by using two arrows (->>)which is referred to getting JSON objects field as text. After this has been done, the values from the CSV file will be inserted into the employee table .
The image below shows the Columns in the CSV file which the above loop is referencing to.
The database part is now done, it is time to create the connectivity to the frontend using Laravel.
Step 4 : Create a controller in Laravel, and give it the name Employee.
Step 5 : Create an API after your controller is created
We are done with the Laravel part, now we need to create http request in Vue and Typescript.
Step 6 : Create a service for the payload in Typescript using AXIOS
- Create an Axios Common-http-Config file
2. Create a service to specify the payload, in this file you need to import the Axios plug in and the config file which we have created above.
Step 7 : Create an async function in your Vuejs file that will be used to upload the file to the database. In your Vuejs file call the service created to send the values to your service, then your Laravel, then to the database.
The Code below is explained here
In the async function, declare a variable called employData which will hold the data from the csv file. Then pass it to the service. When you look at the code in the snippet above the async function is called and it has the argument of the result which is the csv data converted to an object.
Check your payload in networks, in this tutorial I am using google chrome browser.
If you are able to see the values in your payload from your CSV file that means that your code has run successfully.
After you are done you can upload the CSV file, when http post is( 200) successful, your database data should look like the result below in Postgres after running a select * from employee query .
Well that’s how you can upload a CSV file data to your Postgres database. Hope it works for you too. Happy codding
References
