「Submit」をクリックされることで表示される、文字「Got it!」を2秒で消す方法

前提

に記載されているコードを流用させていただき、ファイルをグーグルドライブにアップロードしています

「ファイルを選択」の際に複数のファイルを選択できないので、「ファイル選択」作業を複数回行うことにしました
「ファイル選択」→「Submit」→「Got it!」　→「ファイル選択」→、、、
その際に、「Got it!」が表示されたままですと、2回目のファイルアップロードが正常に完了したかがわからないので、「Got it!」が2秒後に消えたら、2回目が完了した際にも再度、「Got it!」を表示でき、正常にアップロードができたことを確認できると考えております

実現したいこと

・ファイルがアップロードされた際に表示される、「Got it!」が2秒後に消したい
（「ファイル選択」時にctrlキーにて複数選択できればいいのですが、難しそうなので、「Got it!」を消すことを考えております）

・「Got it!」が2秒後に消えるのと同時に、最初にファイル添付したファイル名も一緒に消えてくれるとなお嬉しいです

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

「Got it!」が表示されたままで消えない、又は、「Submit」をクリックすると何もない真っ白なページが表示される

該当のソースコード

上述コード記載ページから転記いたします

### コード.gs

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

function processForm(formObject) {
  var formBlob = formObject.myFile;
  var driveFile = DriveApp.createFile(formBlob);
  return driveFile.getUrl();
}

### **index.html**

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function handleFormSubmit(formObject) {
        google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
      }
      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">Got it!</a>';
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="myFile" type="file" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
 </body>
</html>

試したこと

setTimeout（）　や　show（）　などで、操作を試みましたが、消すことができませんでした
初歩的な質問だと思いますが、なにとぞご教授願います

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

setTimeoutを使うやり方があります。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <script>
6      // Prevent forms from submitting.
7      function preventFormSubmit() {
8        var forms = document.querySelectorAll('form');
9        for (var i = 0; i < forms.length; i++) {
10          forms[i].addEventListener('submit', function(event) {
11            event.preventDefault();
12          });
13        }
14      }
15      window.addEventListener('load', preventFormSubmit);
16
17      function handleFormSubmit(formObject) {
18        var elemInputFile = document.getElementById('inputFile');
19        if (elemInputFile.value === '') {
20          alert("ファイルが選択されていません");
21          return;
22        }
23        google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
24      }
25      function updateUrl(url) {
26        var div = document.getElementById('output');
27        var elemInputFile = document.getElementById('inputFile');
28        var defaultValue = elemInputFile.defaultValue;
29        div.innerHTML = '<a href="' + url + '">Got it!</a>';
30        setTimeout(() => {
31          div.innerHTML = '';
32          elemInputFile.value = defaultValue;
33        }, 2000);
34      }
35    </script>
36  </head>
37  <body>
38    <form id="myForm" onsubmit="handleFormSubmit(this)">
39      <input id="inputFile" name="myFile" type="file" />
40      <input type="submit" value="Submit" />
41    </form>
42    <div id="output"></div>
43 </body>
44</html>

追加/変更した部分

inputにidを付与

html
1      <input id="inputFile" name="myFile" type="file" />

submit時にファイルが選択されていないときはダイアログを表示してページ遷移しないようにする。

js
1      function handleFormSubmit(formObject) {
2        var elemInputFile = document.getElementById('inputFile');
3        if (elemInputFile.value === '') {
4          alert("ファイルが選択されていません");
5          return;
6        }
7        google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
8      }

「最初にファイル添付したファイル名も一緒に消えてくれるとなお嬉しい」

→意図としては、文字を消すことよりも、"ファイルが選択されていない状態の表示に戻す"ということだろうから、ファイル未選択状態の時の値（defaultValue）を取得しておいて、Got itを非表示にするタイミングと同時に戻すようにする。

js
1      function updateUrl(url) {
2        var div = document.getElementById('output');
3        var elemInputFile = document.getElementById('inputFile');
4        var defaultValue = elemInputFile.defaultValue;
5        div.innerHTML = '<a href="' + url + '">Got it!</a>';
6        setTimeout(()=>{
7          div.innerHTML = '';
8          elemInputFile.value = defaultValue;
9        }, 2000)
10      }

投稿2022/07/30 09:36

編集2022/07/30 10:40

退会済みユーザー

総合スコア0

swing

2022/07/30 12:17

早々にご教授頂き、ありがとうございます！頂きましたコードをコピペして、希望どおりの動作を確認しましたまた、ファイル名も一緒に消えてほしい意図をくみ取り、コードに反映して頂き、深謝いたしますまだ、追加/変更して頂いた内容を理解できておりませんので、一つづつ元のコードと見比べながら調べていきますどうもありがとうございました！

行動規範の内容に同意します