LANG SELRCT

コードを書く場所についてはこちら

2018年1月16日火曜日

Googleドライブの指定したフォルダにファイルをアップロードする(formのsubmitボタンを使わない)


ローカルのファイルをGoogle Driveの指定フォルダにアップロードする方法その2です


今回はform内のsubmitボタンではなく
formの外にあるボタンでアップロードしてみます


form内のsubmitボタンで実現する方法は こちら に書きました


アップロードする手順
  1. 「ファイルを選択」をクリックする
  2. ローカルファイルの選択画面が開く
  3. 任意のファイルを選択して「開く」をクリックする
  4. 「選択されていません」に選択したファイル名が表示される
  5. 「ボタン」をクリックする
  6. 指定したフォルダにファイルがアップロードされる
  7. アップロードしたファイルのURLがアラートに出る



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function processForm(formObject) {
  var folder_id = "FOLDER_ID";
  var folder = DriveApp.getFolderById(folder_id);
  var file = formObject.myFile;
  var drive_file = folder.createFile(file);
  var file_url = drive_file.getUrl();
  return file_url;
}
意訳
この機能がやること
指定したHTMLファイルを表示する


この機能がやること
アップロード先のフォルダIDを指定して
フォルダを指定して
formObjectの中のnameがmyFileの要素を取得して
そのファイルをアップロードして
そのURLを取得して
返す




index.html
<!DOCTYPE html>
<html>
<body>
  <form id="myForm">
    <input name="myFile" type="file" />
  </form>
  <button id="bt">ボタン</button>
  <script>
    var this_form = document.getElementById("myForm");
    document.getElementById("bt").addEventListener('click', function() { handleFormSubmit(this_form) });
        
    function handleFormSubmit(formObject) {
      google.script.run
        .withSuccessHandler(updateUrl)
        .processForm(formObject);
    }

    function updateUrl(url) {
      alert(url);
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


フォームを置く
ファイルをアップロードするためのボタンを置く

ボタンを置く

idがmyFormの要素を取得して
idがbtの要素がクリックされた時にhandleFormSubmitに渡して実行する

この機能がやること
.gsファイルを実行する
成功したらupdateUrlを実行する
実行する.gsファイルはprocessFormでformObjectを渡す


この機能がやること
返ってきたurlをアラートに出す