Angular 5 – Import data from Excel into Firestore

Hi Friends,

Hope you are all well. This is a response to a few of our friends asking me how to import data from excel into cloud firestore. In this post, we’ll be seeing how to do that exactly.

Let’s begin.


Clone my repo from here.

Follow these simple steps (after cloning the repo)

Step 1:

Get into the directory from a terminal and give the below command.

Step 2:

Get into the functions directory and install dependencies. (Give the below two commands in order)

Step 3:

Now open up the project in your favorite editor and get into app/src/environments/environment.ts

Copy your project configuration from firebase and paste it here in the config variable.

Step 4:

Get back into functions directory

Deploy it to firebase cloud.

Step 5:

Now simply run the app using ng serve.

Login as any user (user from your firebase project) and simply choose the excel with the data that you want to import.

It will take a minute (wait exactly a minute) before it starts storing it into firestore under the collection name mycoll and each row will become a document under the collection.

Note:  Both the collection name and document names can be customised in the xltofirestore service in the project. (Also I would advise you to increase the number of seconds from 60 to a greater number in the setTimeout() function in the same service if you are planning to use a excel with a large number of rows.

If you wanted to give an object inside the object you are storing, kindly change the excel accordingly. For eg., if the rows in the excel are named street, city, zip then all will be stored as different fieldvalues. But if they are named address.street, & then they will be stored as entities under a common address object.

The helper lib that I am using to convert excel to JSON is available here. It was created by Steve tarver and I am very much grateful to him for giving us this tool.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.     Donate to keep this site alive..

I would highly recommend watching the video for more clarity on how to use this.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • Nextcompta Paca

    Hello Tphangout ,
    Do we need to set up CORS headers to use google storage ?
    I have a error ” failed to load ” json file “No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.”
    Thank you in advance for your reply