Allow Multiple Files Upload on Google Apps Script

Question

How do I change this script to allow multiple files to be uploaded or even files bigger than 5 MB?

Current script:

<!-- Written by Amit Agarwal amit@labnol.org --> 

<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
  <div id="forminner">
    <div class="row">
      <div class="col s12">
        <h5 class="center-align teal-text">Submit My Article</h5>
        <p class="disclaimer">This <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">File Upload Form</a> (<a href="https://youtu.be/C_YBBupebvE">tutorial</a>) Powered by <a href="https://ctrlq.org/code/19747-google-forms-upload-files" target="_blank">Google Scripts</a></p>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
        <label for="name">Article Headline</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
        <label for="email"><a href="https://www.google.com.tw/search?newwindow=1&rlz=1C1NHXL_zh-TWTW740TW740&q=byline+%E4%B8%AD%E6%96%87&oq=byline+%E4%B8%AD%E6%96%87&gs_l=psy-ab.3..0j0i8i10i30k1.13478.26153.0.27447.10.9.1.0.0.0.139.542.8j1.9.0....0...1.1j4.64.psy-ab..0.6.346...0i67k1j0i22i30k1j33i160k1.7bxnoHhXH84">Byline</a> (English, Chinese and/or <a href="https://www.google.com.tw/search?newwindow=1&rlz=1C1NHXL_zh-TWTW740TW740&q=pseudonym+%E4%B8%AD%E6%96%87&oq=pseudonym+%E4%B8%AD%E6%96%87&gs_l=psy-ab.3..0.2596.6799.0.7633.14.10.4.0.0.0.95.562.10.10.0....0...1.1j4.64.psy-ab..0.10.388...0i22i30k1j33i160k1.YTjT9Ex_16I">Pseudonym</a>)</label>
      </div>
    </div>

    <div class="row">
      <div class="file-field input-field col s12">
        <div class="btn">
          <span>File</span>
          <input id="files" type="file">
        </div>
        <div class="file-path-wrapper">
          <input class="file-path validate" type="text" placeholder="Select a File to Upload">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="file-field input-field col s12">
        <div class="btn">
          <span>File</span>
          <input id="files" type="file">
        </div>
        <div class="file-path-wrapper">
          <input class="file-path validate" type="text" placeholder="Select a File to Upload">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="file-field input-field col s12">
        <div class="btn">
          <span>File</span>
          <input id="files" type="file">
        </div>
        <div class="file-path-wrapper">
          <input class="file-path validate" type="text" placeholder="Select a File to Upload">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="file-field input-field col s12">
        <div class="btn">
          <span>File</span>
          <input id="files" type="file">
        </div>
        <div class="file-path-wrapper">
          <input class="file-path validate" type="text" placeholder="Select a File to Upload">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="input-field col s6">
        <button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
      </div>   
    </div>
    <div class="row">
      <div class="input-field col s12" id = "progress">
      </div>
    </div>
  </div>
  <div id="success" style="display:none">
    <h5 class="left-align teal-text">File Uploaded</h5>
    <p>Your file has been successfully uploaded.</p>
    <p>The <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">pro version</a> (see <a href="">demo form</a>) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>    
    <p class="center-align"><a  class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
  </div>
</form>

<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">menu</i>
  </a>
  <ul>
    <li><a class="btn-floating red"  href="https://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
    <li><a class="btn-floating blue"  href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
    <li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>

<script>

  var file, 
      reader = new FileReader();

  reader.onloadend = function(e) {
    if (e.target.error != null) {
      showError("File " + file.name + " could not be read.");
      return;
    } else {
      google.script.run
        .withSuccessHandler(showSuccess)
        .uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val());
    }
  };

  function showSuccess(e) {
    if (e === "OK") { 
      $('#forminner').hide();
      $('#success').show();
    } else {
      showError(e);
    }
  }

  function submitForm() {

    var files = $('#files')[0].files;

    if (files.length === 0) {
      showError("Please select a file to upload");
      return;
    }

    file = files[0];

    if (file.size > 1024 * 1024 * 5) {
      showError("The file size should be < 5 MB. Please <a href='http://www.labnol.org/internet/file-upload-google-forms/29170/' target='_blank'>upgrade to premium</a> for receiving larger files in Google Drive");
      return;
    }

    showMessage("Uploading file..");

    reader.readAsDataURL(file);

  }

  function showError(e) {
    $('#progress').addClass('red-text').html(e);
  }

  function showMessage(e) {
    $('#progress').removeClass('red-text').html(e);
  }


</script>

Background Notes and Apology

Hi, all,

I realize that this question may be answered already, but please bear with me as I am not a programmer and had not written this script myself so I'm not sure which Previous Answer may apply to my question.

This being said, I'm more than happy to delete my question or have it closed as a duplicate if someone could just point me in the right direction.

Lastly, I am not married to this script so if someone has a better script to suggest that has all the features (multiple file upload, no limit on file sizes), I'm open to suggestions.

I'm also open to using anything that would allow me to upload to my Google Drive as long as it's free as we are a volunteer organization with no funds and this is just for a feature to allow our members to submit their articles for our organization's newsletter.

Thanks and sorry again for the (possible) duplicate question!

标签： file-upload google-apps-script large-files multiple-file-upload

1条回答

爷、活的狠高调

2楼-- · 2019-02-20 17:06

You can use Google Drive Picker, which has no upload limit on file sizes. Before you use this code, you need to do some configuration.

In the script editor, select Resources > Developers Console Project.Enable Drive Api. After that click on Google API console. It will redirect to your API Manager page.
Then, click on Enable API.
In the filter box, type "picker", then select "Google Picker API"
On the next screen, click Enable API.
In the console's left navigation, click Credentials.
Then click on "Create credentials" then API key.
Once the API Key is created, edit it by clicking on the pencil icon.
Then change the "Key restriction" option to Under "Accept requests from these HTTP referrers (websites) ", Add these URLs as referrers and then click Create:
*.google.com
*.googleusercontent.com
Copy the API Key and paste it in the code below. var DEVELOPER_KEY="key" Also create folder in google drive where all the attachments will be uploaded.

Once the drive folder is created, add the respective id of the folder to var uploadview = new google.picker.DocsUploadView().setParent('<<Drive API>>');

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <style>
  #attachmentTable{ 
  background: white;
  }
  tr th,tr td{
  text-align:center;
  }
 </style>
</head>
<body style='font-family: cursive;'>
  <div>
    <center><button onclick='getOAuthToken()' style="margin-top:50px;outline:0;" class="btn btn-success">Upload File(s)</button></center>
  <div class='table-responsive' style="display:none;" id="attachmentTableDiv">
  <table id="attachmentTable" class="table table-bordered" style="width:900px;margin:20px auto;float:none;">
      <thead>
        <tr style="background:#f1f1f1;">
          <th>Title</th>
          <th>ID</th>
          <th>URL</th>
          <th>Date Created</th>
          <th>Download</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
    </div>
  </div>
    <script>
    var DEVELOPER_KEY = '<<YOUR API KEY>>'; 
    var pickerApiLoaded = false;

    /**
     * Loads the Google Picker API.
     */
    function onApiLoad() {
      gapi.load('picker', {'callback': function() {
        pickerApiLoaded = true;
      }});
     }


    function getOAuthToken() {
      google.script.run.withSuccessHandler(createPicker).getOAuthToken();
    }


    function createPicker(token) {
      if (pickerApiLoaded && token) {
      // var all         = new google.picker.DocsView(google.picker.ViewId.DOCS); //To upload from Google Drive
       var uploadview  = new google.picker.DocsUploadView().setParent('<<Drive API>>');  //To upload from local machine..Add you google drive folder
       var picker = new google.picker.PickerBuilder()
            .addView(uploadview)
            //.addView(all)
            .hideTitleBar()
            //.setLocale('nl') //--Regional language settings
            //.enableFeature(google.picker.Feature.NAV_HIDDEN)
            .setOAuthToken(token)
            .setSize(536, 350)
            .setDeveloperKey(DEVELOPER_KEY)
            .setCallback(pickerCallback)
            .setOrigin(google.script.host.origin)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .build();
        picker.setVisible(true);
      } else {
        showError('Unable to load the file picker.');
      }
    }

    /**
     * A callback function that extracts the chosen document's metadata from the response object. 
     */
    function pickerCallback(data) {
      var action = data[google.picker.Response.ACTION];
      if (action == google.picker.Action.PICKED) {
        for(var i in data[google.picker.Response.DOCUMENTS]){
        var doc = data[google.picker.Response.DOCUMENTS][i];
        var id = doc[google.picker.Document.ID];
        var url = doc[google.picker.Document.URL];
        var title = doc[google.picker.Document.NAME];
        var dateCreated = doc[google.picker.Document.LAST_EDITED_UTC];
        var date = new Date(dateCreated);
        date=date.toLocaleString();
        $('#attachmentTable tbody').append("<tr><td>"+title+"</td><td>"+id+"</td><td><a href='"+url+"' target='_blank'>Link</a></td><td>"+date+"</td><td><a href='https://drive.google.com/drive/uc?export=download&id="+id+"'><i class='glyphicon glyphicon-download-alt'></i></a></td></tr>");
        $('#attachmentTableDiv').show();
      }
    }
}
  </script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script>google.load("picker", "1", {callback:function(){pickerApiLoaded =!0}});</script>
</body>
</html>

code.gs

/*   
Fetch the oAuthToken 
*/
function getOAuthToken() {
  DriveApp.getRootFolder();
  Logger.log(ScriptApp.getOAuthToken())
  return ScriptApp.getOAuthToken();

}


function doGet(){
return HtmlService.createTemplateFromFile('drivePicker') 
          .evaluate()
          .setTitle('Google Drive Picker')
          .setSandboxMode(HtmlService.SandboxMode.IFRAME);  
}

0人赞添加讨论(0) 举报

Allow Multiple Files Upload on Google Apps Script

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间