Javascript Google Drive File Picker API Example to Upload, Download & Display Files in Browser

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Picker API Quickstart</title>
  <meta charset="utf-8" />
</head>
<body>
<p>Picker API API Quickstart</p>

<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

<pre id="content" style="white-space: pre-wrap;"></pre>

<script type="text/javascript">
  /* exported gapiLoaded */
  /* exported gisLoaded */
  /* exported handleAuthClick */
  /* exported handleSignoutClick */

  // Authorization scopes required by the API; multiple scopes can be
  // included, separated by spaces.
  const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';

  // TODO(developer): Set to client ID and API key from the Developer Console
  const CLIENT_ID = '';
  const API_KEY = '';

  // TODO(developer): Replace with your own project number from console.developers.google.com.
  const APP_ID = '';

  let tokenClient;
  let accessToken = null;
  let pickerInited = false;
  let gisInited = false;


  document.getElementById('authorize_button').style.visibility = 'hidden';
  document.getElementById('signout_button').style.visibility = 'hidden';

  /**
   * Callback after api.js is loaded.
   */
  function gapiLoaded() {
    gapi.load('client:picker', initializePicker);
  }

  /**
   * Callback after the API client is loaded. Loads the
   * discovery doc to initialize the API.
   */
  async function initializePicker() {
    await gapi.client.load('https://www.googleapis.com/discovery/v1/apis/drive/v3/rest');
    pickerInited = true;
    maybeEnableButtons();
  }

  /**
   * Callback after Google Identity Services are loaded.
   */
  function gisLoaded() {
    tokenClient = google.accounts.oauth2.initTokenClient({
      client_id: CLIENT_ID,
      scope: SCOPES,
      callback: '', // defined later
    });
    gisInited = true;
    maybeEnableButtons();
  }

  /**
   * Enables user interaction after all libraries are loaded.
   */
  function maybeEnableButtons() {
    if (pickerInited && gisInited) {
      document.getElementById('authorize_button').style.visibility = 'visible';
    }
  }

  /**
   *  Sign in the user upon button click.
   */
  function handleAuthClick() {
    tokenClient.callback = async (response) => {
      if (response.error !== undefined) {
        throw (response);
      }
      accessToken = response.access_token;
      document.getElementById('signout_button').style.visibility = 'visible';
      document.getElementById('authorize_button').innerText = 'Refresh';
      await createPicker();
    };

    if (accessToken === null) {
      // Prompt the user to select a Google Account and ask for consent to share their data
      // when establishing a new session.
      tokenClient.requestAccessToken({prompt: 'consent'});
    } else {
      // Skip display of account chooser and consent dialog for an existing session.
      tokenClient.requestAccessToken({prompt: ''});
    }
  }

  /**
   *  Sign out the user upon button click.
   */
  function handleSignoutClick() {
    if (accessToken) {
      accessToken = null;
      google.accounts.oauth2.revoke(accessToken);
      document.getElementById('content').innerText = '';
      document.getElementById('authorize_button').innerText = 'Authorize';
      document.getElementById('signout_button').style.visibility = 'hidden';
    }
  }

  /**
   *  Create and render a Picker object for searching images.
   */
  function createPicker() {
    const view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes('image/png,image/jpeg,image/jpg');
    const picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setDeveloperKey(API_KEY)
        .setAppId(APP_ID)
        .setOAuthToken(accessToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setCallback(pickerCallback)
        .build();
    picker.setVisible(true);
  }

  /**
   * Displays the file details of the user's selection.
   * @param {object} data - Containers the user selection from the picker
   */
   async function pickerCallback(data) {
    if (data.action === google.picker.Action.PICKED) {
      let text = `Picker response: \n${JSON.stringify(data, null, 2)}\n`;
  
      // Clear previous file details
      const contentDiv = document.getElementById('content');
      contentDiv.innerHTML = text;
  
      const filesList = document.createElement('ul'); // Create a list to show file details
      filesList.style.marginTop = '10px'; // Add some spacing
  
      // Loop through all selected documents
      for (const document of data[google.picker.Response.DOCUMENTS]) {
        const fileId = document[google.picker.Document.ID];
        const fileName = document[google.picker.Document.NAME];
  
        // Add file info to the list
        const listItem = document.createElement('li');
        listItem.innerHTML = `<strong>File Name:</strong> ${fileName} <br>
                              <strong>File ID:</strong> ${fileId}`;
        filesList.appendChild(listItem);
  
        // Fetch additional details about the file using Drive API
        try {
          const res = await gapi.client.drive.files.get({
            'fileId': fileId,
            'fields': '*',
          });
          const fileDetails = document.createElement('p');
          fileDetails.innerText = `Drive API Details: ${JSON.stringify(res.result, null, 2)}`;
          listItem.appendChild(fileDetails);
        } catch (error) {
          console.error('Error fetching file details:', error);
          const errorMsg = document.createElement('p');
          errorMsg.innerText = 'Error fetching file details.';
          errorMsg.style.color = 'red';
          listItem.appendChild(errorMsg);
        }
      }
  
      // Append the list to the content area
      contentDiv.appendChild(filesList);
    }
  }
  
</script>
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

<!DOCTYPE html>

<html>

<head>

<title>Picker API Quickstart</title>

</head>

<body>

<p>Picker API API Quickstart</p>

<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>

/* exported gapiLoaded */

/* exported gisLoaded */

/* exported handleAuthClick */

/* exported handleSignoutClick */

// Authorization scopes required by the API; multiple scopes can be

// included, separated by spaces.

const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';

// TODO(developer): Set to client ID and API key from the Developer Console

const CLIENT_ID = '';

const API_KEY = '';

// TODO(developer): Replace with your own project number from console.developers.google.com.

const APP_ID = '';

let tokenClient;

let accessToken = null;

let pickerInited = false;

let gisInited = false;

document.getElementById('authorize_button').style.visibility = 'hidden';

document.getElementById('signout_button').style.visibility = 'hidden';

/**

* Callback after api.js is loaded.

function gapiLoaded() {

gapi.load('client:picker', initializePicker);

}

/**

* Callback after the API client is loaded. Loads the

* discovery doc to initialize the API.

async function initializePicker() {

await gapi.client.load('https://www.googleapis.com/discovery/v1/apis/drive/v3/rest');

pickerInited = true;

maybeEnableButtons();

}

/**

* Callback after Google Identity Services are loaded.

function gisLoaded() {

tokenClient = google.accounts.oauth2.initTokenClient({

client_id: CLIENT_ID,

scope: SCOPES,

callback: '', // defined later

});

gisInited = true;

maybeEnableButtons();

}

/**

* Enables user interaction after all libraries are loaded.

function maybeEnableButtons() {

if (pickerInited && gisInited) {

document.getElementById('authorize_button').style.visibility = 'visible';

}

/**

* Sign in the user upon button click.

function handleAuthClick() {

tokenClient.callback = async (response) => {

if (response.error !== undefined) {

throw (response);

}

accessToken = response.access_token;

document.getElementById('signout_button').style.visibility = 'visible';

document.getElementById('authorize_button').innerText = 'Refresh';

await createPicker();

};

if (accessToken === null) {

// Prompt the user to select a Google Account and ask for consent to share their data

// when establishing a new session.

tokenClient.requestAccessToken({prompt: 'consent'});

} else {

// Skip display of account chooser and consent dialog for an existing session.

tokenClient.requestAccessToken({prompt: ''});

}

/**

* Sign out the user upon button click.

function handleSignoutClick() {

if (accessToken) {

accessToken = null;

google.accounts.oauth2.revoke(accessToken);

document.getElementById('content').innerText = '';

document.getElementById('authorize_button').innerText = 'Authorize';

document.getElementById('signout_button').style.visibility = 'hidden';

}

/**

* Create and render a Picker object for searching images.

function createPicker() {

const view = new google.picker.View(google.picker.ViewId.DOCS);

view.setMimeTypes('image/png,image/jpeg,image/jpg');

const picker = new google.picker.PickerBuilder()

.enableFeature(google.picker.Feature.NAV_HIDDEN)

.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)

.setDeveloperKey(API_KEY)

.setAppId(APP_ID)

.setOAuthToken(accessToken)

.addView(view)

.addView(new google.picker.DocsUploadView())

.setCallback(pickerCallback)

.build();

picker.setVisible(true);

}

/**

* Displays the file details of the user's selection.

* @param {object} data - Containers the user selection from the picker

async function pickerCallback(data) {

if (data.action === google.picker.Action.PICKED) {

let text = `Picker response: \n${JSON.stringify(data, null, 2)}\n`;

// Clear previous file details

const contentDiv = document.getElementById('content');

contentDiv.innerHTML = text;

const filesList = document.createElement('ul'); // Create a list to show file details

filesList.style.marginTop = '10px'; // Add some spacing

// Loop through all selected documents

for (const document of data[google.picker.Response.DOCUMENTS]) {

const fileId = document[google.picker.Document.ID];

const fileName = document[google.picker.Document.NAME];

// Add file info to the list

const listItem = document.createElement('li');

listItem.innerHTML = `<strong>File Name:</strong> ${fileName} <br>

<strong>File ID:</strong> ${fileId}`;

filesList.appendChild(listItem);

// Fetch additional details about the file using Drive API

try {

const res = await gapi.client.drive.files.get({

'fileId': fileId,

'fields': '*',

});

const fileDetails = document.createElement('p');

fileDetails.innerText = `Drive API Details: ${JSON.stringify(res.result, null, 2)}`;

listItem.appendChild(fileDetails);

} catch (error) {

console.error('Error fetching file details:', error);

const errorMsg = document.createElement('p');

errorMsg.innerText = 'Error fetching file details.';

errorMsg.style.color = 'red';

listItem.appendChild(errorMsg);

}

// Append the list to the content area

contentDiv.appendChild(filesList);

}

</script>

</body>

</html>

Javascript Google Drive File Picker API Example to Upload, Download & Display Files in Browser

Comments

Leave a Reply Cancel reply

Archives