用户通过javascript上传文件到谷歌驱动器?

时间:2015-08-28 13:26:38

标签: javascript google-drive-api

我有一个网络应用程序,我希望用户能够从他们的计算机添加文件并将其上传到我的谷歌硬盘。我有选择文件按钮,但我不确定该功能应如何访问我的谷歌驱动器帐户,并在点击按钮时发送文件。

<h4>Upload a file:</h4>
    <div class="form-group">
        <input type="file" id="fileInput" name="fileInput"/>
    </div><br>

我把它放在infowindow中,我能够从用户的计算机中搜索并选择一个文件。 我真的只是寻找JS功能将其发送到我的谷歌驱动器。 任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:2)

我们遇到了同样的问题 - 因此开发了一个匿名上传到网站所有者Google云端硬盘的网络服务。

请参阅https://driveuploader.com/

您可以轻松创建一个可靠的上传组件,该组件可以嵌入任何包含iframe代码的网站,类似于YouTube,或者用作基本JavaScript API带有webhooks的其他应用程序的一部分。

创建上传器后 - 使用以下代码完成嵌入:

<iframe src="https://driveuploader.com/upload/{uploader key}/embed/"></iframe>

它可在所有最新的网络浏览器中运行 - 并支持无限制的文件大小上传(在数百GB的文件上测试,是技嘉)。

由于该组件具有响应能力,因此对于Wordpress或Google协作平台网站也是如此。

如果您只需要一个基本页面,您的朋友,学生,同事可以安全地将一些(可能很大的)文件放入您的Google云端硬盘,那么这也是免费提供的。

免责声明:我们是此项服务的开发者。

答案 1 :(得分:0)

您可以在Google的API参考中找到所需的所有信息,但我已经复制了以下重要内容。但是,您肯定需要查看有关身份验证的信息,可以在以下链接中找到:https://developers.google.com/api-client-library/javascript/start/start-js。我还在下面列出了他们的身份验证示例。

<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">

  var clientId = '837050751313';

  var apiKey = 'AIzaSyAdjHPT5Pb7Nu56WJ_nlrMGOAgUAtKjiPM';

  var scopes = 'https://www.googleapis.com/auth/plus.me';

  function handleClientLoad() {
    // Step 2: Reference the API key
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
  }

  function checkAuth() {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
  }

  function handleAuthResult(authResult) {
    var authorizeButton = document.getElementById('authorize-button');
    if (authResult && !authResult.error) {
      authorizeButton.style.visibility = 'hidden';
      makeApiCall();
    } else {
      authorizeButton.style.visibility = '';
      authorizeButton.onclick = handleAuthClick;
    }
  }

  function handleAuthClick(event) {
    // Step 3: get authorization to use private data
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
    return false;
  }

  // Load the API and make an API call.  Display the results on the screen.
  function makeApiCall() {
    // Step 4: Load the Google+ API
    gapi.client.load('plus', 'v1').then(function() {
      // Step 5: Assemble the API request
      var request = gapi.client.plus.people.get({
        'userId': 'me'
      });
      // Step 6: Execute the API request
      request.then(function(resp) {
        var heading = document.createElement('h4');
        var image = document.createElement('img');
        image.src = resp.result.image.url;
        heading.appendChild(image);
        heading.appendChild(document.createTextNode(resp.result.displayName));

        document.getElementById('content').appendChild(heading);
      }, function(reason) {
        console.log('Error: ' + reason.result.error.message);
      });
    });
  }
</script>
// Step 1: Load JavaScript client library
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

您拥有身份验证设置以下代码的方法是如何上传文档。你也可以使用&#39; PUT&#39;请求。有关详细信息,请参阅此链接:https://developers.google.com/drive/web/manage-uploads

POST /upload/drive/v2/files?uploadType=media HTTP/1.1
Host: www.googleapis.com
Content-Type: image/jpeg
Content-Length: number_of_bytes_in_file
Authorization: Bearer your_auth_token