How to Upload Files to Google Drive using Google Drive API V3

You are currently viewing How to Upload Files to Google Drive using Google Drive API V3


Welcome folks I am back with another blog post. In this post we will be implementing How to Upload Files to Google Drive using Google Drive REST API V3 from scratch. Google Drive is one of the most popular medium of storing your data in the modern world. For this application we first of all need to create a project in Google Developers Console and get your client id and client secret. This process is illustrated in the next steps in a detailed fashion.




So just create a new project by providing a certain name or you can select from the created projects.



After selecting the project just click on create credentials and create a brand new OAuth Client ID.



Just select the option of web application because we are creating a web application which interacts with the Google Drive API.



So in this just provide localhost for the first field and the second field is important it needs to be the same for your project you can have different redirect url. It is basically the url to which Google redirects you whenever the user grants access to your application. Select it cautiously it needs to be same for your project.



Click on the create button to generate the client id and client secret. It will be different for you and don’t share this with others. Just copy both and store it somewhere we will be using it later in the application.


After that create your project and inside your project create a brand new index.html file which will hold a simple button. For this project we are using XAMMP for local server.




After that create a new file main.js which will hold the logic for index.html. In this file we will redirect the user to the permissions page where users can grant access to your application.



The whole source code is full of comments and it is self explanatory we are using jQuery and also just replace the client id , redirect_uri with your values respectively. When you save this and execute this you will getting this output as shown below.





As you can see that whenever you execute this you will be redirected to the screen where you want to select your google account from this list of accounts and after that it grants access to your account by allowing this you will be granting access to this application. If you redirect_uri is different from the one you have mentioned in the Google Developers Console. You will getting this error of redirect_uri.




After that create a brand new file called as upload.html which will be the actual redirect_uri to which the user will land after allowing access to the application. Just create a new file upload.html and copy paste the code. And also create upload.css and copy paste the code of css.





You can see that there is a upload button and also a button from which you can select files from your computer and upload it to your Google Drive.


Just create a new upload.js file to create the logic whenever the upload button is clicked from the user. First of all we will exchange the authorization code which is generated in the previous step with the access token. Access token are generally the medium from which we will making the requests to the API.






You can see that we have successfully uploaded the image to the google drive. My drive shows that i have uploaded the image right now after pressing the upload button.


Congratulations we are done Uploading files to Google Drive using the Google Drive REST API V3 in Javascript from scratch. Thanks for reading this post and if you like reading this and wants to read more of this please subscribe the blog below to get all the notications.

This Post Has One Comment

  1. E

    How do I change the filename of the file I am uploading?

Leave a Reply