2017-02-14 102 views
2

私の質問はこれとまったく同じです:Upload a file to a Google Web Apps with doPostPOST(doPost)経由でGoogle ScriptのWebアプリケーションにファイルをアップロードする方法は?

別のドメインのGoogle ScriptのWebアプリケーションに直接ファイルをアップロードするにはどうすればよいですか?私はbase64文字列でファイルを変換するためにその問題の回避策に答えましたが、問題は残っています。ファイルをGoogleスクリプトにアップロードすることはできますか?

答えて

4

ローカルPC上のHTMLフォームから、GASのdoPost()でファイルを直接アップロードすることはできません。 "multipart/form-data"は "doPost()"に使用できない可能性があるためです。したがって、あなたが言うように、Base64を変換することが解決策につながります。

"doPost()"でファイルをアップロードするには2通りの方法があります。

1.これがガスプロジェクトのガスやHTMLを使用してファイルをアップロードし

ガスプロジェクトにHTMLフォームからファイルをアップロードします。この場合、ファイルはスクリプトによってBase64に変換されません。 (これは、内部プロセスとして変換することができる。)

2.これは、ローカルPC上のHTMLフォームからファイルをアップロードし、ローカルPC上

をHTMLフォームからファイルをアップロードします。 GASは "doPost()"を制御します。この場合、ファイルはBase64にエンコードされ、テキストデータとしてアップロードされ、GASを使用してファイルにデコードされます。


1.アップロードガスプロジェクトのHTMLフォームからファイル

ルール

  1. 次のサンプルスクリプトやHTMLには、Google Appsスクリプトのプロジェクトに行う必要があります。

  2. GASプロジェクトをWebアプリケーションとして展開します。 https://developers.google.com/apps-script/guides/web URLを取得します。

  3. スクリプトを更新した後、新しいバージョンとして更新する必要があります。

Form.html

<html> 
    <body> 
    <form> 
     <input type="file" name="upFile"> 
     <input type="button" value="ok" onclick="google.script.run.upload(this.parentNode)"> 
    </form> 
    </body> 
</html> 

スクリプト

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

function upload(e) { 
    DriveApp.createFile(e.upFile); 
} 

2.ローカルPC上のHTMLフォームからファイル

をアップロード0

ルールは上記とほとんど同じです。スクリプトはGASプロジェクトに置かれます。しかし、HTML形式はローカルPCに置かれます。

スクリプト

function doGet(e) { 
    return message("Error: no parameters"); 
} 

function doPost(e) { 
    if (!e.parameters.filename || !e.parameters.file) { 
    return message("Error: Bad parameters"); 
    } else { 
    var data = Utilities.base64Decode(e.parameters.file, Utilities.Charset.UTF_8); 
    var blob = Utilities.newBlob(data, MimeType.PNG, e.parameters.filename); 
    DriveApp.createFile(blob); 
    return message("completed"); 
    } 
} 

function message(msg) { 
    return ContentService.createTextOutput(JSON.stringify({result: msg})).setMimeType(ContentService.MimeType.JSON); 
} 

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
</head> 
<body> 
    <input type="file" id="file"> 

    <script type="text/javascript"> 
     $(function(){ 
      var url = 'https://script.google.com/macros/s/[Project ID]/exec'; 
      var params = { 
       filename: 'samplefile', 
       imageformat: 'PNG' 
      }; 

      $('#file').on("change", function() { 
       var file = this.files[0]; 
       var fr = new FileReader(); 
       fr.onload = function(e) { 
        params.file = e.target.result.replace(/^.*,/, ''); 
        postJump(); 
       } 
       fr.readAsDataURL(file); 
      }); 

      function postJump(){ 
       var html = '<form method="post" action="'+url+'" id="postjump" style="display: none;">'; 
       Object.keys(params).forEach(function (key) { 
        html += '<input type="hidden" name="'+key+'" value="'+params[key]+'" >'; 
       }); 
       html += '</form>'; 
       $("body").append(html); 
       $('#postjump').submit(); 
       $('#postjump').remove(); 
      } 
     }); 
    </script> 
</body> 
</html> 

このサンプルスクリプトは、テストとしてPNGファイルをアップロードすることが想定します。他のファイルをアップロードする場合は、MIMEタイプを変更してください。 https://developers.google.com/apps-script/reference/base/mime-type

HTMLサンプルの場合、ファイルが選択されるとファイルがアップロードされます。

これが役立つ場合は、私はうれしいです。

+0

ありがとうございます。私はすでにbase64ファイルについて知っていますが、直接ファイルのアップロードが許可されているかどうかはわかりませんでした。 –

+0

@Tanaikeこれはあなたのブログと同様に非常に役に立ちます。あなたの素晴らしい仕事に感謝します! – duhaime

+1

@duhaimeようこそ。私のブログにも立ち寄ってくれてありがとう。 – Tanaike

関連する問題