GASでキャンバスの画像ファイルをgoogleドライブに保存

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

google apps scriptを使用してcanvasを画像変換してスプレッドシートにURLを保存しgoogleドライブにも画像を保存。またファイルをアップロードしてgoogleドライブに保存それをスプレッドシートに転送したいのですが、キャンバスの画像をgoogleドライブに保存とアップロードしたファイルをスプレッドシートに転送のところがうまくいきません。
どなたか教えて頂けないでしょうか？
よろしくお願いします。

該当のソースコード

HTMLとJavaScript
<body>
<div id="formDiv">

  <form id="myForm" method="post" action="アプリケーション公開ID">
    <p>
      <label>名前：<input type="text" name="name"></label>
    </p>

    <input id="signature" name="signature" value="">
        <button id="reset">リセット</button>

       
  <canvas id="cancan" width="560" height="280" style="border: 2px solid;"></canvas>


    <a id="hiddenLink" download="canvas.png">link</a>
   

    <img id="canvasImage" src="dummy.png">


<button onclick="downloadCanvas()">sss</button>
   ファイルを選択して下さい: <input name="myFile" type="file" /><br/>
  <input id="save" type="button" value="送信" onclick="
      toggle_visibility('inProgress');
        google.script.run
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" />
  </form>
</div>

<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
アップロード中・・・・
</div>

<div id="output">
  <!-- Blank div will be filled with "Complete.html" after form submission. -->
</div>


  <script>
 
  function updateOutput(resultHtml) {

    toggle_visibility('inProgress');
    
  
    var outputDiv = document.getElementById('output');
    outputDiv.innerHTML = resultHtml;
  }

  function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
      e.style.display = 'none';
    else
      e.style.display = 'block';
  }
  
 
  
        let canvas = document.querySelector("canvas");
        let signaturePad = new SignaturePad(canvas);
        $('#reset').click(function () {
            signaturePad.clear();
        });

      
         function downloadCanvas() {
            let canvas = document.getElementById('cancan')
            let link = document.getElementById('hiddenLink')
            link.href = canvas.toDataURL()
            $("#signature").val(link);
            document.getElementById('canvasImage').src = canvas.toDataURL()

            link.click()
        }
      
    
    </script>
</body>

コード.gs

function doGet(){
return HtmlService.createTemplateFromFile("form").evaluate();
}

function doPost(e){
var sheet = SpreadsheetApp.openByUrl("スプレッドシートID")
.getSheetByName("sheet");
//データ取得

var name = e.parameter.name;
var signature = e.parameter.signature;
var myFile=e.parameter.myFile;
var date = new Date();

var array = [date,name,signature,myFile];
sheet.appendRow(array);

}

var folderId = "フォルダID";

function doGet(e) {

var template = HtmlService.createTemplateFromFile('form.html');
return template.evaluate();

}

function processForm(theForm) {
var fileBlob = theForm.myFile;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);

var template = HtmlService.createTemplateFromFile('Complete.html');

template.fileUrl = doc.getUrl();

return template.evaluate().getContent();
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

papinianus

2019/05/14 22:32

具体的にこのコードでどこまでできているのか追記お願いできませんか？

keisuke1999

2019/05/15 02:15 編集

コメントありがとうございます。今回、Formで電子サイン（canvas）とcanvasとは別で添付画像ファイルをスプレッドシートに追記して、それらの画像ファイルをgoogleドライブに保存できるようなツールを実装したいと思っています。 ◼️実装できている事・canvasのファイルをダウンロードし、画像URLを作成してスプレッドシートにURLを追記・formにファイルを添付して送信時にgoogleドライブの指定フォルダに保存 ◼️実装できない事・canvasのファイルデータをgoogleドライブの指定フォルダに保存・formの画像添付ファイルのURLをgoogleスプレッドシートに追記説明が分かりづらくて申し訳ございません、よろしくお願い致します。