How to Delete Files Stored in Google Drive using Google Drive API V3 in Javascript

Welcome Folks I am back with another blog post. In this Post we will make a simple application which will allow you to delete the files stored in your Google Drive using the Google Drive API V3 in Javascript. 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.

 

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 download.php which will be the actual redirect_uri to which the user will land after allowing access to the application. Just create a new file download.php and copy paste the code.

 

 

 

You can see that there is a heading of Delete Google Drive Files and a button to do it

 

Just create a new download.js file to create the logic whenever the delete 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.

 

 

 

 

 

 

 

 

 

 

 

 

 

As you can see wheneer we hit the delete button for the following file a confirm dialog is presented to us taking the confirmation if we want to delete the file so whenever we press the ok button then it shows the file is deleted and then it also shows us the updated list of files coming from the API of Google Drive. In this we have successfully deleted the files stored in the Google Drive using the Google Drive API V3 in Javascript

 

Congratulations we are done Deleting files Stored in 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.

Leave a Reply