Welcome folks today in this blog post we will be looking on how we can we upload multiple files selected by the user to the google drive 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

In the above blog post we talked about the different steps and logic required to upload a single file to google drive using the fetch api upload request. Now we will be converting the same function to upload multiple files selected by the user. Let me show you the directory structure of the app as shown below

Now we need to modify the profile.html file to include the multiple parameter to the select files input element to allow the users to select multiple files as shown below

Now we will be again attaching the onsubmit event listener to the form element by getting the reference as shown below

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

form.onsubmit = uploadFile

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

form.onsubmit = uploadFile

Now we need to modify the uploadFile() function to allow the users to upload multiple files. For this we will be using the forEach loop to loop through all the items for all the files as shown below

function uploadFile(e) {
  e.preventDefault();
  console.log(file.files.length)
  let length = file.files.length

  Array.from(file.files).forEach((f) => {
    let data = new FormData();
    var metadata = {
      name: Date.now() + f.name, // Filename at Google Drive
      mimeType: f.type, // mimeType at Google Drive
      //parents: ["##googldrivefolderid##"], // Folder ID at Google Drive
    };
    data.append(
      "metadata",
      new Blob([JSON.stringify(metadata)], { type: "application/json" })
    );
    data.append("file", f);

    fetch(
      "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id",
      {
        method: "POST",
        headers: new Headers({
          Authorization: "Bearer " + ACCESS_TOKEN
        }),
        body: data,
      }
    )
      .then((res) => {
        return res.json();
      })
      .then(function (val) {
        length = length - 1
        if(length == 0){
          file.value = ""
          alert("All Files Uploaded")
        }
      })
      .catch((err) => {
        console.log(err);
      });
  });
}

function uploadFile(e) {

e.preventDefault();

console.log(file.files.length)

let length = file.files.length

Array.from(file.files).forEach((f) => {

let data = new FormData();

var metadata = {

name: Date.now() + f.name, // Filename at Google Drive

mimeType: f.type, // mimeType at Google Drive

//parents: ["##googldrivefolderid##"], // Folder ID at Google Drive

};

data.append(

"metadata",

new Blob([JSON.stringify(metadata)], { type: "application/json" })

);

data.append("file", f);

fetch(

"https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id",

{

method: "POST",

headers: new Headers({

Authorization: "Bearer " + ACCESS_TOKEN

}),

body: data,

}

)

.then((res) => {

return res.json();

})

.then(function (val) {

length = length - 1

if(length == 0){

file.value = ""

alert("All Files Uploaded")

}

})

.catch((err) => {

console.log(err);

});

}

As you can see guys we are repeating the same steps for uploading single file. But here we are using the foreach loop to do the same tasks in a loop to repeat these fetch post requests for all the files. When all the files will be uploaded we will be displaying a simple message to the user that all files are uploaded and we will also reset the form. So if you open the web app inside the browser you will be able to upload multiple files as shown below

Google Drive API Example to Upload Multiple Files to Drive Using OAuth2 in Browser Using Javascript

Get Started

FULL SOURCE CODE