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, address.city & address.zip 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

  • Saxon B

    I fixed the CORS error now I get “core.js:1448 ERROR Error: Uncaught (in promise): FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
    FirebaseError: Missing or insufficient permissions.” and no collection / docs created. Any ideas?

    • Hello, Please ensure that you are using the correct firebase configurations in your project.. (If that is right, then kindly check the rules in your firebase database/firestore. If that allows only authenticated users, then this error will occur)

  • Thanks for post. Can you publish firebase rtdb version of this project ? Good works.

  • eldoAs

    Hello,
    Thank you for your job,
    However I wonder if there is a way to get the cloud function answer instead of running a 60000 seconds timeout, which doesn’t guarentee that we’ll get our file in time?

    • Yep.. This was just a simple beginner code to accomplish the job so that everyone could use it with zero guidance..

  • CZD

    Is there any leaner utility to upload a Json directly ?
    i.e. instead of the .xls bulk in the middle ?

    basically ideally would be a command line interface to do the same where we can pass the json file + fb link + securitykeyfile

  • PLau Peter

    Hi, extremely useful but how could I import data for the subcollections?

    • Actually, that is a good question.. Maybe I’ll work on it soon.. Thanks. Have a nice day.. :)

  • Johan Andrés Barrios Amorocho

    Thanks for solution!!!
    I have an issue… In my case, excel file uploads on “storage” As Documente and create a record on ‘Realtime Database’ not in Cloud Firestore, You Have any idea for solve this behavior?

  • 劉家瑋
  • Wael Fairaq
  • suraj neupane

    It didnt work and showed some errors. Tried to read and debug, wasted the whole day.

  • ชีวิตคือการต่อสู่ สู่เพื่อวันท

    I got this error cmd

    You have to be inside an angular-cli project in order to use the serve command. ??

  • Kavitha

    where are u adding these authentication details
    please help me with it…..its urgent

  • Ganesh Kumbhar

    I am getting this error .Plz help me out sir ,it’s urgent

    Error: Cannot find module ‘@angular-devkit/core’