Welcome folks today in this blog post we will be looking on how we can search files in google drive and display it inside the browser. We will have the search functionality to get only images,videos and pdf documents. And also we will be deleting specific files from google drive in javascript using the fetch api. 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

Now we will start this blog post. In this one we will be adding the functionality of searching files in google drive and displaying it and also deleting the specific files using it’s id in google drive api. For this one the directory structure will look something like this as shown below

Now guys to add this functionality to the existing app in the previous blog post we need to update the profile.html file with the below code

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>
</head>
<body>
    <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>
    <table>
        <thead>
            <tr>
                <th>Name of File</th>
                <th>MimeType</th>
            </tr>
            
        </thead>
        <tbody id="result">

        </tbody>
    </table>
</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>

<table>

<thead>

<tr>

<th>MimeType</th>

</tr>

</thead>

</tbody>

</table>

</body>

</html>

Now you will see we have added some more buttons to search the files based upon if we want only images or videos or pdf files. We have three buttons for that. And then we have the html5 table where we will be displaying all the files which are there in google drive. We have two columns which is the name of the file and the mimetype. Now if you open the profile.html file it will look something like this as shown below

And now we need to update the code inside the profile.js file. Inside this we will be adding the methods for searching the files in the google drive and for getting only the images,videos and the pdf files.

profile.js

let search = document.getElementById("search");
let images = document.getElementById("images");
let videos = document.getElementById("videos");
let pdf = document.getElementById("pdf");
let result = document.getElementById("result");

let search = document.getElementById("search");

let images = document.getElementById("images");

let videos = document.getElementById("videos");

let pdf = document.getElementById("pdf");

let result = document.getElementById("result");

As you can see first of all we are getting the references of all the form input elements using their id as shown above.

search.onclick = listFiles;
images.onclick = getImages;
videos.onclick = getVideos;
pdf.onclick = getPDF;

search.onclick = listFiles;

images.onclick = getImages;

videos.onclick = getVideos;

pdf.onclick = getPDF;

And now we have added the onclick event listener to each of the html5 buttons as shown above.

Now we need to define these methods as we declared above

function listFiles() {
  searchFiles();
}
function getImages() {
  searchFiles("mimeType contains 'image/'");
}
function getVideos() {
  searchFiles("mimeType contains 'video/'");
}
function getPDF() {
  searchFiles("mimeType contains 'application/pdf'");
}

function searchFiles(q = "") {
  result.innerHTML = "";
  fetch(
    `https://www.googleapis.com/drive/v3/files?q=${q}&pageSize=50&supportsAllDrives=true&fields=files(name,id,mimeType)`,
    {
      method: "GET",
      headers: new Headers({ Authorization: "Bearer " + ACCESS_TOKEN }),
    }
  )
    .then((res) => {
      return res.json();
    })
    .then(function (val) {
      console.log(val);
      val.files.forEach((file) => {
        let id = file.id;
        result.innerHTML += `
            <tr>
                <td><a target="_blank" href="https://drive.google.com/file/d/${file.id}">${file.name}</a>
                </td>
                <td>${file.mimeType}
                <button onclick="
                fetch('https://www.googleapis.com/drive/v3/files/${id}',{
                    method:'DELETE',
                    headers: new Headers({ Authorization: 'Bearer ${ACCESS_TOKEN}'})
                })
                .then((info) => {
                    console.log(info)
                    alert('file is deleted')
                })
                ">Delete</button>
                </td>
            </tr>
            `;
      });
    });
}

function listFiles() {

searchFiles();

}

function getImages() {

searchFiles("mimeType contains 'image/'");

}

function getVideos() {

searchFiles("mimeType contains 'video/'");

}

function getPDF() {

searchFiles("mimeType contains 'application/pdf'");

}

function searchFiles(q = "") {

result.innerHTML = "";

fetch(

`https://www.googleapis.com/drive/v3/files?q=${q}&pageSize=50&supportsAllDrives=true&fields=files(name,id,mimeType)`,

{

method: "GET",

headers: new Headers({ Authorization: "Bearer " + ACCESS_TOKEN }),

}

)

.then((res) => {

return res.json();

})

.then(function (val) {

console.log(val);

val.files.forEach((file) => {

let id = file.id;

result.innerHTML += `

<tr>

</td>

<td>${file.mimeType}

<button onclick="

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

method:'DELETE',

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

})

.then((info) => {

console.log(info)

alert('file is deleted')

})

">Delete</button>

</td>

</tr>

});

}

As you can see we are first of making the searchFile() method inside that we are making a simple fetch api get request to the oauth2 endpoint of the google drive api. Here we are passing the pageSize parameter which represents the minimum number of files that will be shown in the browser from the google drive. And also we are adding the fields inside the url which represents which information we will be needed in this case we need the name,mimetype and id of the file which is searched by the user.

And after that we are using the foreach loop to display all the files which is returned by the google drive api. And inside that we are displaying the name of the file and the mimetype of the file. And then we have the delete button also which will actually delete the file from the google drive api.

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

Get Started

FULL SOURCE CODE