以前、GoogleのPicker APIを利用したアップローダを作成しました。正直な所、このAPIは非常に強力で、Google Driveと連携するアップローダやファイル選択ダイアログならばこれを素直に使ったほうがベストです。しかし、一方で他のサービスなどには利用出来ないので、Google Drive以外で使うシーンでは、これまで通り、HTMLでのアップロードの仕組みを構築する必要があります。

今回、単体のアップロード、File APIを利用した複数のファイルのアップロードの2種類を作成してみました。尚、複数ファイルの選択は、CtrlキーやShiftキーを押しながら選択する事が出来ます。

今回使用するスプレッドシート等

ソースコード

単体アップローダの場合

GAS側コード

  • uploadmanがダイアログ表示を行うスクリプトです。
  • sendFormはHTML側から叩いて実行する実際にアップロード作業を行うスクリプトです。
  • theFormという引数部分で、ファイルをBLOB形式で受け取ります。myFileとはHTML側のアップロードするボタンに付けられてるname属性値です。

HTML側コード

  • 非常にシンプルです。アップロードボタンには、google.script.run.sendFormというGAS側の関数を叩くコマンドを入れてあります。
  • this.parentNodeでformの中身をまとめて引数として送りつけています。

実行結果

スプレッドシートを開き、上部にある「▶あぷろだ」メニューの中の【ファイル選択】を開くと、アップロード用のダイアログが開きます。但し、実際にはファイルを作るメソッドはオフにしてありますので、実際にはサンプルからはアップロードはできません。コピーして該当箇所のコメントアウトを解除し、folderIdを入れて使いましょう。

図:ダイアログ上からファイルをアップロードする

ポイント

  1. ダイアログは必ず、createTemplateFromFileメソッドで作成して出力しなければなりません。
  2. 仕様上、ファイルは1個ずつしか選択できません。但し、HTML5が使えるので、multipleを指定すると複数選択出来るようになります。サンプルスプレッドシートは複数選択出来るようにしています。複数選択は、Ctrlキーを押しながらファイルを選択するだけです。多分配列で渡されるんじゃなかろうか。
  3. G Suitesなどで使う場合、当たり前ですがフォルダに対してのアクセス権がない場合、アップロードが出来ません。但し、実行権限を各人ではなくファイルオーナーにしておくと、アクセス権限がなくともアップロードが可能です。
  4. 所定のフォルダは直接スクリプト内に書くのではなく、Propertie.Serviceなどを使って、スクリプトプロパティなどにフォルダIDを格納し、スクリプト内から呼び出す方式にしたほうが便利です。
  5. アップロード中に例えばスピナー(くるくる回転するgif画像など)や、アップロードしてるよというメッセージ、また、何度もボタンを押せないように送信したら、ボタンを押せなくするなどの対策をしておく必要性があります。

複数ファイルアップローダの場合

GAS側コード

  • uploadmanがダイアログ表示を行うスクリプトです。
  • saveFileが実際にドライブにファイルを生成するスクリプトです。Blobデータとファイル名を受け取ります。

HTML側コード

実行結果

スプレッドシートを開き、上部にある「▶複数あぷろだ」メニューの中の【ファイル選択】を開くと、アップロード用のダイアログが開きます。但し、実際にはファイルを作るメソッドはオフにしてありますので、実際にはサンプルからはアップロードはできません。コピーして該当箇所のコメントアウトを解除し、folderIdを入れて使いましょう。

図:複数のファイルをいっぺんにアップロードできる

ポイント

  • 単一のファイルのアップロードと異なり、HTML側でのFile APIに関する処理が加わっています。
  • GAS側のファイルを作る関数を呼び出すルーチンでは、少々特殊な書き方で、ループ処理を行わせています。
  • もちろん、inputには、multipleを入れて置きます。
  • formタグ関係はなくても問題ありません。
  • そのままHTML側からGAS側にデータを渡すと、Base64でエンコードされているので、デコードしてあげないと読めないファイルが出来てしまいます。

関連リンク

共有してみる: