Google Driveに複数ファイルをアップロードしたい のsubmitボタンを使わないパターンです
ファイルを選択したらGoogleドライブの指定したフォルダにアップロードされます
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
var FOLDER_ID = "ID";
function upload_file_gs(reader_result, file_name) {
var result_split = reader_result.split(',');
var content_type = result_split[0].split(';')[0].replace('data:', '');
var row_data = result_split[1];
var data = Utilities.base64Decode(row_data);
var file = Utilities.newBlob(data, content_type, file_name);
var folder = DriveApp.getFolderById(FOLDER_ID);
var drive_file = folder.createFile(file);
var file_url = drive_file.getUrl();
return file_url;
}
|
意訳この処理は以下を実行する 指定したHTMLファイルを表示する アップロード先のドライブのフォルダID この機能がやること 受け取ったreader_resultをカンマ(,)で区切って content_typeを抜き出して row_dataを抜き出して row_dataをbase64Decodeして Utilities.newBlobにファイルのデータとcontent_typeとファイル名を渡して Google DriveのフォルダIDを指定して そこにファイルを作成して 作成したファイルのURLを取得して 返す |
index.html
<!DOCTYPE html>
<html>
<body>
<form>
<div>
<input type="file" id="my_files" multiple>
</div>
</form>
<textarea id="upload_file_ta" class="display_none"></textarea>
<label id="upload_label"></label>
<div id="upload_div"></div>
<script>
document.getElementById("my_files").addEventListener("change", upload_files);
var files_len = 0;
var uploaded_len = 0;
function upload_files() {
var files = document.getElementById("my_files").files;
files_len = files.length;
for (var i = 0; i < files.length; i++) {
uploadFile(files[i]);
document.getElementById("upload_label").textContent = "アップロードしています...";
}
}
function uploadFile(file) {
var reader = new FileReader();
reader.onload = function() {
var reader_result = reader.result;
var file_name = file.name
google.script.run
.withSuccessHandler(uploaded)
.upload_file_gs(reader_result, file_name);
}
reader.readAsDataURL(file);
}
function uploaded(file_url) {
create_link(file_url);
uploaded_len++;
if (uploaded_len == files_len) {
document.getElementById("upload_label").textContent = "アップロードしました";
}
}
function create_link(file_url) {
var div = document.getElementById("upload_div");
var br = document.createElement("br");
var link = document.createElement("a");
link.textContent = file_url;
link.setAttribute("href", file_url);
link.setAttribute("target", "_blank");
div.appendChild(link);
div.appendChild(br);
}
</script>
</body>
</html>
|
意訳フォームを置く ファイルを選択するボタンを置く テキストエリアを置く アップロード状況を示すテキストを入れるラベルを置く アップロードしたファイルのURLを入れるdivを用意しておく idがmy_filesの要素が変更されたらupload_filesを実行する アップロードするファイル数の初期値を0にしておく アップロードされたファイル数の初期値を0にしておく この機能がやること idがmy_filesの要素のファイルをすべて取得する アップロードするファイル数をfiles_lenに入れる ファイルの数だけ以下を繰り返す uploadFileにファイルを一つずつ渡す idがupload_labelの要素のテキストをuploading...にする この機能がやること FileReaderを作って 読み込みが成功したら以下を実行する resultを取得して fileから名前を取得して .gsファイルの指定したスクリプトを実行する 成功したらuploadedを実行する 実行する.gsファイルはコード.gsにあるupload_file_gsでreader_result, file_nameを渡す fileを読み込む この機能がやること 受け取ったfile_urlをcreate_linkに渡す アップロードしたファイル数を1ずつ足していく もしアップロードしたファイル数とアップロードするファイル数が一致したら idがupload_labelの要素のテキストをuploadedにする この機能がやること idがupload_divの要素を取得する 改行を作る ハイパーリンクを作る リンクのテキストに受け取ったfile_urlを入れる リンク先にfile_urlを設定する リンクを新規タブで開くように設定する upload_divにリンクを追加する upload_divに改行を追加する |
