GASでドライブに複数ファイルをアップロード・圧縮したい

###前提・実現したいこと

Google Apps Scriptについて質問させて頂きます。

ローカルにあるファイルを
Googleドライブに保存する機能を実装しています。

今回実現したいことは2つです。

1.複数ファイルをアップロードする
2.複数ファイルを1ファイルに圧縮(まとめられればOK)

###1ファイルをGoogleドライブに保存するコード

コード.gs

function doGet(e) { 
  //トップページを読み込む  
  var template = HtmlService.createTemplateFromFile('index.html');
  return template.evaluate();
}

function ProcFileUpload(formObject) {
  // 各種情報を取得
  var wkFolderId = DriveApp.createFolder('TEST').getId();
  var folder = DriveApp.getFolderById(wkFolderId);

  // ファイルを格納
  var drive_file = folder.createFile(formObject.fileUpload);

  return drive_file.getUrl();
}

index.html(JavaScript)

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6
7  <body>
8  <form id="formUpload">
9    <input type="file" name="fileUpload" />
10  </form>
11  <button id="btnUpload">アップロード</button>
12
13  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
14  <script>
15    var this_form = document.getElementById("formUpload");
16    document.getElementById("btnUpload").addEventListener('click', function() { handleFormUploadSubmit(this_form) });
17
18    function handleFormUploadSubmit(formObject) {
19      google.script.run.withSuccessHandler(SuccessMsg).ProcFileUpload(formObject);
20    }
21    
22    function SuccessMsg(rtnInfo) {
23      alert('Success!! '+rtnInfo);
24    }
25    
26  </script>
27  </body>
28</html>

###試したこと

inputタグでwebkitdirectoryやmultipleを指定しましたが、
コード.gs側でファイルをうまく取り扱えませんでした。

行動規範の内容に同意します

回答2件

ベストアンサー

このような修正は如何でしょうか。toneさんの手法で行う場合を想定して修正してみました。inputでmultipleを使用して複数のファイルをアップロードし、それらをzipで圧縮して1つのファイルとしてGoogle Driveへ保存する流れで動作します。ポイントと感じたところは、HTML側で全てのファイルをオブジェクトとしてまとめてからGAS側へ送るところかと思います。

スクリプトを使用する際の注意点は、下記のGAS側、HTML側のスクリプトを入れ替えた後に新たなバージョンとしてWeb Appsをデプロイしてから実行するところです。これにより変更したスクリプトが反映されます。

GAS側のスクリプト

javascript
1function ProcFileUpload(obj) {
2  var blobs = obj.map(function(e) {
3    return Utilities.newBlob(Utilities.base64Decode(e.data), e.mimeType, e.fileName)
4  });
5  var zip = Utilities.zip(blobs, "sample.zip"); // zipのファイル名を変更する場合はここを変更してください。
6  
7  // 各種情報を取得
8  var folder = DriveApp.createFolder('TEST');
9
10  // ファイルを格納
11  var drive_file = folder.createFile(zip);
12
13  return drive_file.getUrl();
14}

HTML側のスクリプト

html
1<input name="fileUpload" id="files" type="file" multiple>
2<button id="btnUpload" onclick='getFiles()'>アップロード</button>
3
4<script>
5function getFiles() {
6  const f = document.getElementById('files');
7  const r = Promise.all([...f.files].map((file, i) => {
8    const fr = new FileReader();
9    return new Promise((r) => {
10      fr.onload = (e) => {
11        const data = e.target.result.split(",");
12        return r({fileName: f.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]});
13      }
14      fr.readAsDataURL(file);
15    });
16  }));
17  r.then((obj) => {
18    google.script.run.withSuccessHandler((id) => {
19      console.log(id);
20    }).ProcFileUpload(obj);
21  });
22}
23</script>

注意点

この方法では注意すべき点が御座います。

HTML側からGAS側へ送ることのできるデータのサイズは50 MB程度です。（程度としているのはデータを送る際に他の情報が含まれるためか、50 MBよりも若干小さいためこのような表現にしています。）
- 今の場合はbase64で変換した後のサイズを指していますのでご注意ください。
Clas DriveAppを使用してGoogle Driveへファイルを作成する際のBlobの最大サイズは50 MBです。
- 今の場合、zip圧縮前のBlobサイズの最大値が50 MBです。
この方法ではファイルサイズが10 MB程度でもアップロードしてファイルとして保存されるのに20-30秒程度と結構な時間を要しますので大きなサイズのファイルをやり取りする場合はこれを考慮してください。

Google Drive上でファイルをzipで圧縮するにはGASが必要ですが、ファイルをアップロードするだけであればDrive APIを使用する方が効率が良いように思われます。

投稿2018/12/22 07:54

kisojin

総合スコア899

tone

2018/12/26 04:00

kisojinさん、前回に引き続き今回もありがとうございます。注意点なども細かく記載して頂けるのは嬉しいです。現在いろいろ試して動かそうとしているのですが動作しません・・・ Googleの拡張サービスなどで何かAPI等を有効にする必要があるのでしょうか？（Chrome上でソースを編集していて、APIはすべて無効になっている状態です）

kisojin

2018/12/26 08:36

こちらでは動作確認を行った後に回答として提案しているのですが、動作しないとのことで誠に申し訳ございません。まず下記をご確認ください。 1. 質問内のスクリプトや私の回答内のスクリプトではGoogleの拡張サービスは使用していません。また、マニフェストでスコープを固定していない限り、スクリプトエディタのスコープ自動検出によってスクリプトを動作するために必要なスコープが自動で設定され、「アプリケーションにアクセスできるユーザー:」をそれぞれ「自分」としてWeb Appsをデプロイしているのであれば、デプロイ時に認証することになるかと思われます。Web Appsのデプロイ時に認証しているかどうかご確認ください。 2. 回答のスクリプトを正しくスクリプトエディタへコピーペーストできているか再度ご確認ください。回答内の「GAS側のスクリプト」、「HTML側のスクリプト」はそれぞれスクリプトファイル、HTMLファイルとして用意しています。 3. 質問内にあるスクリプトを見ますと、Web Appsをデプロイしてそこへアクセスしてスクリプトを実行していると理解しています。もしもこれが間違っているようですとご指摘ください。Web Appsを使ってスクリプトを使用していると仮定した場合、回答に記載したようにスクリプトを変更した際は新たなバージョンとして再デプロイしてから実行してください。 4. Web Appsのデプロイ条件をご確認ください。もしも制限をしているようですと、スクリプトの動作テストとして、「次のユーザーとしてアプリケーションを実行:」、「アプリケーションにアクセスできるユーザー:」をそれぞれ「自分」、「全員（匿名ユーザを含む）」として試してみてください。上記を確認した後にまだ動作しないようですと、可能であれば動作しない内容について追加情報を頂けないでしょうか。残念ながら私の今の能力では「現在いろいろ試して動かそうとしているのですが動作しません・・・」だけでは動作しないという状況のみの理解に留まります。これについては私の力不足で申し訳ありません。どのようにスクリプトを実行しようとしているのか、実行した際のスクリプトの動作状況、エラーなどの情報を頂けますと問題点を見つけるための助けになると思います。また、質問内や回答内にあるスクリプト以外のスクリプトが問題になっている場合は問題点の推測がより困難になるかと思われます。ところで、「Chrome上でソースを編集していて、APIはすべて無効になっている状態です」の意味が分かりません。これについてお教えいただけないでしょうか。

tone

2019/01/07 03:02

kisojinさん、ご返信ありがとうございます。お返事が遅くなってしまい、申し訳ありませんでした。動作しなかった原因がわかりました。ご回答いただいたソースに問題はなく、私が使用していたファイルに問題がありました。 3つのテキストファイルをアップロードしようとしていましたが、 3ファイルとも文字の記述がなく内容がなかったため、うまく動作しなかったようです。中に文字を記述して保存したテキストファイルを使用したところ、動作しました。ご質問頂いた件ですが、私の環境をお伝えしようとしていました。 Chrome上でG Suite Developer Hubを開き、スクリプトエディタを起動して開発をしており、開発環境のAPIはすべて無効になっています。 Drive APIなど、なにかAPIを有効にしないと動作しないのかと思いまして。。。わかりにくい文章になってしまい申し訳ありませんでした。

kisojin

2019/01/09 02:03

ご返事頂き有難うございます。無事動作したとのこと、ご連絡有難うございます。安心しました。

行動規範の内容に同意します