Welcome folks today in this blog post we will be looking on how we can we move files which are stored in google drive to trash and also how to empty trash in javascript using the google drive api v3. All the full source code of the application is shown below.

Get Started

In order to get started you need to read the below blog posts to get on the same page as I will start in this blog post. Before that I have shown successfully how to successfully login and logout using google OAuth2 in javascript. Read it first before beginning this one. Link is given as follows

Javascript OAuth2 Google Login & Logout Example Using Access Token in Browser

And after that you need to read the below blog post in which I have shown how to upload the file to google drive using the oauth2 authentication in browser using the google drive api in javascript. Link is given below

Javascript OAuth2 Google Drive Upload File to Folder Using Fetch API & HTTP POST Method in Browser

And also after that I have shown how basically you can search the files stored inside the google drive and display it inside html5 table and also we looked on how we can permanently delete files stored inside google drive. The link of the blog post is shown below

Javascript OAuth2 Google Drive API Example to Search Images & Videos & Delete Specific File in Browser

And then we saw how to download the files which are stored inside the google drive in the last blog post. The link is shown as follows.

Google Drive API Example to Download Files From URL Using OAuth2 in Browser Using Javascript

Now after reading all these above blog posts you will be in a position to move the files inside the trash and also empty the trash. For doing this guys we will be updating the profile.html of the application we were building. The directory structure is shown below of app

profile.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h1>Welcome to profile page</h1>
        <h2>Upload file to google drive</h2>
        <form id="form">
            <input type="file" id="file" required>
            <input type="submit" value="Upload File">
        </form>
        <button id="search">Search Files</button>
        <button id="images">Only Images</button>
        <button id="videos">Only Videos</button>
        <button id="pdf">Only PDF</button>
        <button id="logout">Logout</button>
        <button id="trash">Empty Trash</button>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Name of File</th>
                    <th>Mimetype</th>
                    <th>Download File</th>
                    <th>Delete File</th>
                    <th>Move to Trash</th>
                </tr>
            </thead>
            <tbody id="result">

            </tbody>
        </table>
    </div>
</body>
<script type="module" src="profile.js"></script>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Welcome to profile page</h1>

<h2>Upload file to google drive</h2>

</form>

<button id="search">Search Files</button>

<button id="images">Only Images</button>

<button id="videos">Only Videos</button>

<button id="logout">Logout</button>

<button id="trash">Empty Trash</button>

<thead>

<tr>

<th>Mimetype</th>

<th>Download File</th>

<th>Delete File</th>

<th>Move to Trash</th>

</tr>

</thead>

</tbody>

</table>

</div>

</body>

</html>

As you can see we have added the button to empty the trash and also we have added a column of move to trash inside the table. The interface will look like this

Cleaning up Trash Folder in Google Drive

Now we will look what happens when we click the empty trash button we will bind the onclick event listener in the below code so that the method emptyTrash() will be executed as shown below

let trash = document.getElementById("trash")

trash.onclick = emptyTrash

let trash = document.getElementById("trash")

trash.onclick = emptyTrash

And now we will be defining this emptyTrash method as shown below

function emptyTrash(){
  fetch("https://www.googleapis.com/drive/v3/files/trash",{
    method:'DELETE',
    headers:new Headers({Authorization:`Bearer ${ACCESS_TOKEN}`})
  })
  .then((info) => {
    console.log(info)
    alert("trash is now Empty")
  })
}

function emptyTrash(){

fetch("https://www.googleapis.com/drive/v3/files/trash",{

method:'DELETE',

headers:new Headers({Authorization:`Bearer ${ACCESS_TOKEN}`})

})

.then((info) => {

console.log(info)

alert("trash is now Empty")

})

}

As you can see we are making a simple fetch api delete request to the oauth2 endpoint of google drive which allows you to completely clean up the trash. And also we are passing the access token as well in the headers. Now if you execute the app it will look like this

And now guys we will be adding the move to trash button inside the table dynamically using some javascript as shown below

<button onclick="
                fetch('https://www.googleapis.com/drive/v3/files/${id}',{
                    method:'PATCH',
                    headers:new Headers({Authorization:'Bearer ${ACCESS_TOKEN}','Content-Type':'application/json','Accept':'application/json','_method':'PATCH'}),
                    body:JSON.stringify({
                      trashed:true
                    })
                })
                .then((info) => {
                    console.log(info)
                    alert('file is trashed')
                })
                .catch((error) => {
                  console.log(error)
                })
                "
                >
                Trash
                </button>

<button onclick="

fetch('https://www.googleapis.com/drive/v3/files/${id}',{

method:'PATCH',

headers:new Headers({Authorization:'Bearer ${ACCESS_TOKEN}','Content-Type':'application/json','Accept':'application/json','_method':'PATCH'}),

body:JSON.stringify({

trashed:true

})

.then((info) => {

console.log(info)

alert('file is trashed')

})

.catch((error) => {

console.log(error)

})

Trash

</button>

As you can see that we are making a patch request this method using fetch api. And inside the endpoint we are providing dynamically the file id of the drive file. And also we are providing the headers of access token and content type also. And after that file is trashed as shown below

Google Drive API Example to Move Files to Trash & Empty Trash Using OAuth2 in Browser Using Javascript

Get Started

FULL SOURCE CODE