如何为文件上传添加状态栏？（谷歌驱动器/应用程序脚本）

Question

我正在使用此视频中描述的脚本，让人们将文件上传到我的 Google 云端硬盘（略有修改的版本）。

上传大文件时，没有任何进展的迹象。 完成后它只会说“文件上传成功”。 是否可以让用户知道上传需要多长时间？ 它不一定是状态栏，百分比也可以。

感谢您对此案例的任何投入。

代码：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
        
}

function uploadFiles(form) {
  
  try {
    
    var dropbox = "Work_Collector";
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);
        
    return "File uploaded successfully " + file.getUrl();
    
  } catch (error) {
    
    return error.toString();
  }
  
}

HTML：

   <!doctype html>
<style type="text/css">
body {
    background-color: #FFFFFF;
}
</style>
<BR>
<BR>
<BR>
<div align="center">
  <p><img src="https://b627cc12-a-62cb3a1a-s-sites.googlegroups.com/site/imagehosting199/home/GoogleTeamColorSmall.png"></p>
  <table width="459" border="0">
    <tbody>
      <tr>
        <td width="462"><div align="center">
          <hr>
        </div>
          <form id="myForm" align="center">
            <input type="text" name="myName" placeholder="Your name..">
            <input type="file" name="myFile">
            <input type="submit" value="Upload File" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
          </form>
          <div id="output"></div>
          <script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
          </script>
        <style>
 input { display:block; margin: 20px; }
 
          </style>
        <hr></td>
      </tr>
    </tbody>
  </table>
  <h3>&nbsp;</h3>
  <p>&nbsp;</p>
</div>

Answer 1

问题和解决方法：

不幸的是，当使用google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode)直接上传文件时，无法检索进度信息。 这似乎是当前的规范。 vinkomlacic的评论中已经提到了这一点，希望对您有所帮助。 而且，在这种方法中，由于 Google Apps 脚本端文件 Blob 的限制，最大文件大小为 50 MB。 因此，为了上传大文件并显示进度信息，需要使用变通方法。 在您的情况下，我还认为可以使用 ResumableUploadForGoogleDrive_js 的Javascript库。 idfurw 的评论已经提到了这一点。

在这个答案中，我想使用 ResumableUploadForGoogleDrive_js 的Javascript库来实现您的目标。 在这种情况下，我想通过修改这个答案来提出一个示例脚本。

用法

1. 为 Web 应用创建 Google Apps 脚本。

为了使用 Web Apps，请创建一个新的 Google Apps Script 项目。

2. 示例脚本。

请将以下脚本复制并粘贴到已创建的 Google Apps 脚本项目的脚本编辑器中。

Google Apps 脚本端： `Code.gs`

在这种情况下，您的显示脚本已被修改。

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function getAuth() {
  // DriveApp.createFile() // This is used for adding the scope of "https://www.googleapis.com/auth/drive".

  var dropbox = "Work_Collector";
  var folder, folders = DriveApp.getFoldersByName(dropbox);
  if (folders.hasNext()) {
    folder = folders.next();
  } else {
    folder = DriveApp.createFolder(dropbox);
  }
  return { accessToken: ScriptApp.getOAuthToken(), folderId: folder.getId() };
}

function setDescription({fileId, description}) {
  DriveApp.getFileById(fileId).setDescription(description);
}

HTML & Javascript 边： `form.html`

在这种情况下，您显示的 HTML 表单已修改。

<form id="myForm" align="center">
  <input type="text" name="myName" placeholder="Your name..">
  <input type="file" name="myFile">
  <input type="submit" value="Upload File"
           onclick="this.value='Uploading..';
                    run();
                    return false;">
</form>
<div id="progress"></div>
<div id="output"></div>

<script src="https://cdn.jsdelivr.net/gh/tanaikech/ResumableUploadForGoogleDrive_js@master/resumableupload_js.min.js"></script>
<script>
function run() {
  google.script.run.withSuccessHandler(accessToken => ResumableUploadForGoogleDrive(accessToken)).getAuth();
}

function ResumableUploadForGoogleDrive({accessToken, folderId}) {
  const myName = document.getElementsByName("myName")[0].value;
  const file = document.getElementsByName("myFile")[0].files[0];
  if (!file) return;
  let fr = new FileReader();
  fr.fileName = file.name;
  fr.fileSize = file.size;
  fr.fileType = file.type;
  fr.readAsArrayBuffer(file);
  fr.onload = e => {
    var id = "p";
    var div = document.createElement("div");
    div.id = id;
    document.getElementById("progress").appendChild(div);
    document.getElementById(id).innerHTML = "Initializing.";
    const f = e.target;
    const resource = { fileName: f.fileName, fileSize: f.fileSize, fileType: f.fileType, fileBuffer: f.result, accessToken, folderId };
    const ru = new ResumableUploadToGoogleDrive();
    ru.Do(resource, function (res, err) {
      if (err) {
        console.log(err);
        return;
      }
      console.log(res);
      let msg = "";
      if (res.status == "Uploading") {
        msg = Math.round((res.progressNumber.current / res.progressNumber.end) * 100) + "% (" + f.fileName + ")";
      } else {
        msg = res.status + " (" + f.fileName + ")";
      }
      if (res.status == "Done") {
        google.script.run.withSuccessHandler(_ => {
          document.getElementById('myForm').style.display = 'none';
          document.getElementById('p').style.display = 'none';
          document.getElementById('output').innerHTML = "https://drive.google.com/file/d/" + res.result.id + "/view?usp=drivesdk";
        }).setDescription({fileId: res.result.id, description: "Uploaded by " + myName});
      }
      document.getElementById(id).innerText = msg;
    });
  }
}
</script>

3. 启用驱动器 API。

请在 Advanced Google 服务中启用 Drive API。

4. 部署 Web 应用程序。

详细信息可以查看官方文档。 在这种情况下，它假设您使用的是新的 IDE。请注意这一点。

在脚本编辑器上，在脚本编辑器的右上角，请单击“单击部署”->“新建部署”。
请点击“选择类型”->“Web App”。
请在“部署配置”下的字段中输入有关Web App的信息。
请 select “我”作为“执行” 。
- 这就是此解决方法的重要性。
请 select “任何人”为“谁有权访问” 。
- 为了测试这个脚本，我认为这个设置可能是合适的。
请点击“部署”按钮。
复制Web App的URL。 就像https://script.google.com/macros/s/###/exec 。
- 当您修改 Google Apps 脚本时，请将部署修改为新版本。 至此，修改后的脚本反映在Web Apps中。 请注意这一点。
- 您可以在“ 为新的 IDE 重新部署 Web 应用程序而无需更改 URL 的 Web 应用程序”的报告中查看详细信息。

5. 测试：

运行此脚本时，检索文本和文件，并使用断点续传上传文件。 并且，该文件放在特定的文件夹中。 并且，上传的文件具有使用输入文本的描述。 文件上传过程中，progress标签中显示progress信息如下。

这是一个简单的示例脚本。 所以，如果你想使用其他的进度信息，请修改上面的脚本。

笔记：

在这种情况下，使用ScriptApp.getOAuthToken()从 Google Apps 脚本端检索访问令牌。 要测试此脚本，您可以使用https://www.googleapis.com/auth/drive的 scope。 但是，如果你想在实际情况下使用这个脚本时保持安全性，我建议使用https://www.googleapis.com/auth/drive.file作为 scope。这样，访问令牌只能访问此客户端创建的文件。
当您修改 Google Apps 脚本时，请将部署修改为新版本。 至此，修改后的脚本反映在Web Apps中。 请注意这一点。
您可以在“ 为新的 IDE 重新部署 Web 应用程序而无需更改 URL 的 Web 应用程序”的报告中查看详细信息。
这是一个使用您的显示脚本的简单示例脚本。 所以，请根据您的实际情况进行修改。

如何为文件上传添加状态栏？（谷歌驱动器/应用程序脚本）

问题描述

1 个解决方案

解决方案1
0 2022-04-26 02:38:27

问题和解决方法：

用法

1. 为 Web 应用创建 Google Apps 脚本。

2. 示例脚本。

Google Apps 脚本端： `Code.gs`

HTML & Javascript 边： `form.html`

3. 启用驱动器 API。

4. 部署 Web 应用程序。

5. 测试：

笔记：

参考：

如何为文件上传添加状态栏？ （谷歌驱动器/应用程序脚本）

问题描述

1 个解决方案

解决方案1 0 2022-04-26 02:38:27

问题和解决方法：

用法

1. 为 Web 应用创建 Google Apps 脚本。

2. 示例脚本。

Google Apps 脚本端： Code.gs

HTML & Javascript 边： form.html

3. 启用驱动器 API。

4. 部署 Web 应用程序。

5. 测试：

笔记：

参考：

如何为文件上传添加状态栏？（谷歌驱动器/应用程序脚本）

解决方案1
0 2022-04-26 02:38:27

Google Apps 脚本端： `Code.gs`

HTML & Javascript 边： `form.html`