Google File Picker API with Google Drive in Javascript – Working Example

Hi friends Welcome to this blog post. In this blog post I will be showing you a working example of Google File Picker API in Javascript in order to select Google Drive files. Let’s get started. In given figure I have given screenshots of this example.


First of all we have a simple button of show picker dialog. Once the user clicks the button then the user will be asked to select the google account to grant permission like this as shown below.




So you can see the permissions dialog is shown to the user where many google accounts are present. Once the user selects the google account then the file picker dialog will be shown to the user to select images,files etc like this as shown below.



So once the user selects any image or files from the picker dialog and click ok then the appropriate id of the file will be printed in the alert box something like this as shown below.



Steps to Make this Application:


  1. Get Client Id and Api Key

The very first step in making this app is to get credentials in the form of client id and api key from google developer console. Make a new project and click on create credentials like this





After filling out this basic information you will get the client id and client secret we only need the client id just copy it and store it somewhere.



After this just open xammp localhost server and start apache at port 80 something like this as shown below.



Source Code



Leave a Reply