5

¿Cómo puedo ver las miniaturas (thumbnail) de mis imágenes de google Drive?

Es decir: que la api de google drive me devuelva la url del thumbnail. También uso jquery, si es necesario o para facilitarlo.

<html>
  <head>
    <script type="text/javascript">
      // Your Client ID can be retrieved from your project in the Google
      // Developer Console, https://console.developers.google.com
      var CLIENT_ID = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com';

      var SCOPES = ['https://www.googleapis.com/auth/drive.metadata.readonly'];

      /**
       * Check if current user has authorized this application.
       */
      function checkAuth() {
        gapi.auth.authorize(
          {
            'client_id': CLIENT_ID,
            'scope': SCOPES.join(' '),
            'immediate': true
          }, handleAuthResult);
      }

      /**
       * Handle response from authorization server.
       *
       * @param {Object} authResult Authorization result.
       */
      function handleAuthResult(authResult) {
        var authorizeDiv = document.getElementById('authorize-div');
        if (authResult && !authResult.error) {
          // Hide auth UI, then load client library.
          authorizeDiv.style.display = 'none';
          loadDriveApi();
        } else {
          // Show auth UI, allowing the user to initiate authorization by
          // clicking authorize button.
          authorizeDiv.style.display = 'inline';
        }
      }

      /**
       * Initiate auth flow in response to user clicking authorize button.
       *
       * @param {Event} event Button click event.
       */
      function handleAuthClick(event) {
        gapi.auth.authorize(
          {client_id: CLIENT_ID, scope: SCOPES, immediate: false},
          handleAuthResult);
        return false;
      }

      /**
       * Load Drive API client library.
       */
      function loadDriveApi() {
        gapi.client.load('drive', 'v2', listFiles);
      }

      /**
       * Print files.
       */
      function listFiles() {
        var request = gapi.client.drive.files.list({
            'maxResults': 10
          });

          request.execute(function(resp) {
            appendPre('Files:');
            var files = resp.items;
            if (files && files.length > 0) {
              for (var i = 0; i < files.length; i++) {
                var file = files[i];
                appendPre(file.title + ' (' + file.id + ')');
              }
            } else {
              appendPre('No files found.');
            }
          });
      }

      /**
       * Append a pre element to the body containing the given message
       * as its text node.
       *
       * @param {string} message Text to be placed in pre element.
       */
      function appendPre(message) {
        var pre = document.getElementById('output');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);

      }

    </script>
    <script src="https://apis.google.com/js/client.js?onload=checkAuth">
    </script>
  </head>
  <body>
    <div id="authorize-div" style="display: none">
      <span>Authorize access to Drive API</span>
      <!--Button for the user to click to initiate auth sequence -->
      <button id="authorize-button" onclick="handleAuthClick(event)">
        Authorize
      </button>
    </div>
    <pre id="output"></pre>
  </body>
</html>

1 respuesta 1

1

Según la documentación, parece que debería haber disponible algunas opciones para obtener el thumbnail de un fichero en Google Drive:

  1. thumbnailLink: una cadena de texto con un enlace temporal (sólo dura unas pocas horas) al thumbnail del fichero.

  2. thumbnail.image: los bytes del thumbnail del fichero codificado en Base-64 (conforme a la sección 5 del RFC 4648)

...pero, o bien hay algún tipo de bug, o bien yo no las he sabido utilizar (bastante más posible), porque parece que no me funcionan del todo y siempre me devuelven undefined.

Si no consigues que los métodos de arriba te funcionen, podrías utilizar una alternativa simple: utilizar la URL que Google Drive utiliza para mostrar los thumbnails: https://drive.google.com/thumbnail?id=ID_DEL_FICHERO.

Así, por ejemplo, en el código de arriba para obtener la URL del thumbnail podrías hacer algo como esto:

request.execute(function(resp) {
    appendPre('Files:');
    var files = resp.items;
    if (files && files.length > 0) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            appendPre(file.title + ' (' + file.id + ')');


            // Código para el thumbnail
            var thumbnail = "https://drive.google.com/thumbnail?id=" + file.id;
            appendPre("THUMBNAIL = " + thumbnail);
        }
    } else {
        appendPre('No files found.');
    }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.