Tuesday, July 9, 2013

Upload file on Google Drive and get Listing From Google Drive with java script


<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <style>
        li
        {
            background-color: white;
            box-shadow: 1px 1px 4px;
            margin-bottom: 10px;
            padding: 2px;
        }
    </style>

    <script type="text/javascript">
      var CLIENT_ID = '<Set your Client Here>';
      var SCOPES = [
          'https://www.googleapis.com/auth/drive.file',
          'https://www.googleapis.com/auth/userinfo.email',
          'https://www.googleapis.com/auth/userinfo.profile',
          // Add other scopes needed by your application.
        ];

//      'https://www.googleapis.com/auth/drive';

      /**
       * Called when the client library is loaded to start the auth flow.
       */
      function handleClientLoad() {
        window.setTimeout(checkAuth, 1);
      }

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


      /**
       * Called when authorization server replies.
       *
       * @param {Object} authResult Authorization result.
       */
      function handleAuthResult(authResult) {
        var authButton = document.getElementById('authorizeButton');
        var filePicker = document.getElementById('filePicker');
        authButton.style.display = 'none';
        filePicker.style.display = 'none';
        if (authResult && !authResult.error) {
          // Access token has been successfully retrieved, requests can be sent to the API.
          filePicker.style.display = 'block';
          filePicker.onchange = uploadFile;
        } else {
          // No access token could be retrieved, show the button to start the authorization flow.
          authButton.style.display = 'block';
          authButton.onclick = function() {
              gapi.auth.authorize(
                  {'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': false},
                  handleAuthResult);
          };
        }
      }

      /**
       * Start the file upload.
       *
       * @param {Object} evt Arguments from the file selector.
       */
      function uploadFile(evt) {
        gapi.client.load('drive', 'v2', function() {
          var file = evt.target.files[0];
          insertFile(file);
        });
      }

      /**
       * Insert new file.
       *
       * @param {File} fileData File object to read data from.
       * @param {Function} callback Function to call when the request is complete.
       */
      function insertFile(fileData, callback)
      {
     
        const boundary = '-------314159265358979323846';
        const delimiter = "\r\n--" + boundary + "\r\n";
        const close_delim = "\r\n--" + boundary + "--";

        var reader = new FileReader();
        reader.readAsBinaryString(fileData);
        reader.onload = function(e)
        {
          var contentType = fileData.type || 'application/octet-stream';
          var metadata = {
            'title': fileData.name,
            'mimeType': contentType
        };

          var base64Data = btoa(reader.result);
          var multipartRequestBody =
              delimiter +
              'Content-Type: application/json\r\n\r\n' +
              JSON.stringify(metadata) +
              delimiter +
              'Content-Type: ' + contentType + '\r\n' +
              'Content-Transfer-Encoding: base64\r\n' +
              '\r\n' +
              base64Data +
              close_delim;

          var request = gapi.client.request({
              'path': '/upload/drive/v2/files',
              'method': 'POST',
              'params': {'uploadType': 'multipart'},
              'headers': {
                'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
              },
              'body': multipartRequestBody});
          if (!callback) {
            callback = function(file) {
              console.log(file)
            };
          }
          request.execute(callback);
          makeApiCall();
        }
      }
     
       function makeApiCall() { 
      
            gapi.client.load('drive', 'v2', makeRequest);  
        }

        function makeRequest() {
            var request = gapi.client.drive.files.list({'maxResults': 100 });
            request.execute(function(resp) {         
                for (i=0; i<resp.items.length; i++) {
                    var titulo = resp.items[i].title;
                    var fechaUpd = resp.items[i].modifiedDate;
                    var userUpd = resp.items[i].lastModifyingUserName;
                    var userEmbed = resp.items[i].embedLink;
                    var userAltLink = resp.items[i].alternateLink;

                    var fileInfo = document.createElement('li');
                    fileInfo.appendChild(document.createTextNode('Title: ' + titulo +
                        ' - LAST MODIF: ' + fechaUpd + ' - By: ' + userUpd ));               
                    document.getElementById('content').appendChild(fileInfo);
                }
            });   
        }

        $(document).ready(function() {
        makeApiCall();
          $('#authorize-button').on('click', handleAuthClick);
          $.getScript('//apis.google.com/js/api.js', function() {
            gapi.load('auth:client', handleClientLoad);
          });
        });
    </script>

    <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

</head>
<body>
    <!--Add a file picker for the user to start the upload process -->
    <input type="file" id="filePicker" style="display: none" />
    <input type="button" id="authorizeButton" style="display: none" value="Authorize" />
    <br />
    <div id="content">
        Files:</div>
</body>
</html>

No comments:

Post a Comment

Opps Part 1 : Abstraction

  Abstraction in C# is a fundamental concept of object-oriented programming (OOP) that allows developers t...