Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Upload to Google Drive and show progress percentage

I'm using the code below to upload large files to Google Drive. How can I display the progress as a numeric percentage?

I don't want to show a progress bar, just a percentage like "20%".

server.gs

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

function uploadFiles(form) {

  try {

    var dropbox = "uploads";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("VideoName_Number: " + form.myName);

    return "Episode uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

upload.html

<div>
  <form id="myForm">
      <input type="text" name="myName" placeholder="VideoName_Number">
      <input type="file" name="myFile">
      <input type="submit" value="Upload Anime" 
             onclick="this.value='Uploading..';
                      google.script.run.withSuccessHandler(fileUploaded)
                      .uploadFiles(this.parentNode);
                      return false;">
  </form>

  <div id="output"></div>

  <script>
      function fileUploaded(status) {
          document.getElementById('myForm').style.display = 'none';
          document.getElementById('output').innerHTML = status;
      }
  </script>

  <style>
   input { display:block; margin: 20px; }
  </style>
</div>
like image 263
Animex PHP Avatar asked Dec 05 '25 09:12

Animex PHP


1 Answers

There is a full article on how to use the google drive api using pure javascript only. The article use the external file (Jquery) known as MediaUploader. You can test a quick demo here.

Demo of the google drive using javascript completely

like image 58
cmsonnet Avatar answered Dec 07 '25 23:12

cmsonnet