как запустить прелоадер при загрузке файла на гугл диск

Question

У меня есть html, созданный с помощью скрипта приложений. Этот html принимает ввод и загрузку файла от пользователя.

<div class="inside_form file_upload">
<label>Upload Resume: </label>
<input id="file" type="file" onchange="saveFile(this)" class="custom_inputs">
</div>

<div class="input-field col s7">
<button id="btn" class="btn blue-grey darken-3 waves-effect waves-light right">Submit<i class="mdi-content-send right"></i></button>
</div>

При загрузке файла я использовал функцию, которая загружает файл на диск Google. Я нашел этот код в Интернете, сделанный "Tanaike"

, который выглядит следующим образом: -

 document.getElementById('btn').addEventListener('click',referstuff);

function saveFile(f) {
    const file = f.files[0];
    const fr = new FileReader();
    fr.onload = function(e) { 
      const obj = {
        filename: file.name,
        mimeType: file.type,
        bytes: [...new Int8Array(e.target.result)]
      };
      google.script.run.withSuccessHandler(e => console.log(e)).saveFile(obj);
    };
    fr.readAsArrayBuffer(file);   
  }

function referstuff()
{

 
 var ref = {};
 
 ref.ei = document.getElementById('ei').value;
 ref.en = document.getElementById('en').value;
 ref.emi = document.getElementById('emi').value;
 ref.mn = document.getElementById('mn').value;
 ref.doj = document.getElementById('doj').value;
 ref.pr = document.getElementById('pr').value;
 ref.nmref = document.getElementById('nmref').value;
 ref.emiref = document.getElementById('emiref').value;
 ref.mnref = document.getElementById('mnref').value;
 ref.pref = document.getElementById('pref').value;
 ref.rlink = document.getElementById('file').value;
 ref.reason = document.getElementById('reason').value;
 ref.plc = document.getElementById('plc').value;
 ref.dp = document.getElementById('dp').value;
 ref.exp = document.getElementById('exp').value;
 

      if (ref.ei == "" || ref.en== "" || ref.emi== "" || ref.mn== "" || ref.doj== "" || ref.pr== "" || ref.nmref== "" || ref.emiref== "" || ref.mnref== "" || ref.pref== "" || ref.plc== "" || ref.dp== "" || ref.exp== "") 
      {
           alert("You have missed to fill a mandatory field!!");
 
      } 
 
      else
      {
           if(confirm("Do you really want to submit?"))
           {
               google.script.run.refsubmission(ref);
               const elem = document.getElementById('modal1');
               const instance = M.Modal.init(elem, {dismissible: false});
               instance.open();                               
           }
           
           else
           {
               alert("Action Dismissed!")
           
           }
      }
}

код на стороне сервера

function saveFile(e) {
  var blob = Utilities.newBlob(e.bytes, e.mimeType, e.filename);
  DriveApp.getFolderById('0AIigAJ4047IdUk9PVA').createFile(blob);
  var file = DriveApp.getFilesByName(e.filename).next().getId();
  
 Logger.log(file);
  
}

Теперь проблема иногда в Для загрузки файла требуется время, и пользователь может нажать кнопку отправки перед загрузкой файла.

Answer 1

Отключить кнопку по умолчанию:

<button id="btn" class="btn blue-grey darken-3 waves-effect waves-light right" disabled>Submit<i class="mdi-content-send right"></i></button>

После загрузки файла включить it:

google.script.run.withSuccessHandler(e => {
  console.log(e);
  document.getElementById("btn").disabled = false;
}).saveFile(obj);