Validating HTML Input fields when uploading file using google HTML Service

Question

I have been tinkering with this problem for most of today and cannot seem to get to a solution with my problem.

I found a script using .gs and html and javascript online which allowed me to upload a file to a google form. At issue though is that I am trying to modify the form to ensure that individuals who upload a file also include their name and email.

I am including my code below.

Essentially, after I call the submit button, I cannot get the code to check the 2 given fields. Can you provide some advice? If I take the 'check' out, the program runs. However, I cannot get the code right to check that the fields are filled out.

Thanks in advance.

/* The script is deployed as a web app and renders the form */
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html')
            .setSandboxMode(HtmlService.SandboxMode.NATIVE);
  // This is important as file upload fail in IFRAME Sandbox mode.
}
 
/* This function will process the submitted form */
function uploadFiles(form) {
  
  try {
    
    /* Name of the Drive folder where the files should be saved */
    var dropbox = form.myName + "Design request form folder" + form.myEmail;
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    /* Find the folder, create if the folder does not exist */
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    /* Get the file uploaded though the form as a blob */
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    
    /* Set the file description as the name of the uploader */
    file.setDescription("Uploaded by " + form.myName);
        
    /* Return the download URL of the file once its on Google Drive */
    return "File uploaded successfully " + file.getUrl();
    
  } catch (error) {
    
    /* If there's an error, show the error message */
    return error.toString();
  }
  
}

<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
 
<!-- You can also include your own CSS styles -->
<style>
  form { margin: 40px auto; }
  input { display:inline-block; margin: 20px; }
</style>
 
<script>
  
  // The function will be called after the form is submitted
  function uploadFile() {
  var x=document.coForm.fieldName.value;
  if (x == null || x ==""){
   alert(x);
  return false;}

    document.getElementById('uploadFile').value = "Uploading File..";
    google.script.run
       .withSuccessHandler(fileUploaded)
       .uploadFiles(document.getElementById("coForm"));
    return false;
  }
 
  // This function will be called after the Google Script has executed
  function fileUploaded(status) {
    document.getElementById('coForm').style.display = 'none';
    document.getElementById('output').innerHTML = status;
  }
  
</script>
 
<!-- This is the HTML form -->
<form id="coForm" name="coForm">
 
  <!-- Text input fields -->
  <input type="text" class="required" id="fieldName" name="myName" placeholder="Your name..">
  <input type="email" class="required" id="fieldEmail" name="myEmail" placeholder="Your email..">
 
  <!-- File input filed -->
  <input type="file" name="myFile">
 
  <!-- The submit button. It calls the server side function uploadfiles() on click -->
  <input type="submit" id="uploadFile" value="Upload File" onsubmit="uploadFile();">
</form>
 
<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>

This is a stand alone Web App. It's not really a Google Form. It's just a regular HTML form. — Alan Wells
– Alan Wells, Commented Dec 9, 2015 at 18:10

Alan Wells · Accepted Answer · 2015-12-09 18:02:00Z

1

Make the "Submit" button a regular button and change the attribute to onmouseup:

<input type="button" id="uploadFile" value="Upload File" onmouseup="uploadFile();">

Remove class="required" from the input fields:

<!-- Text input fields -->
  <input type="text" id="fieldName" name="myName" placeholder="Your name..">
  <input type="email" id="fieldEmail" name="myEmail" placeholder="Your email..">

Add this code to your uploadFile() function:

function uploadFile() {
  var name = document.getElementById('fieldName').value;
  var email = document.getElementById('fieldEmail').value;

  console.log('name: ' + name);
  console.log('email: ' + email);

  if (name === "" || email === "") {
    alert("Your name and/or email is missing!");
    return;
  };

Note the console.log() statements. They print information to the browsers console log. To open the browsers log, hit the f12 key, (for Chrome and some others)

answered Dec 9, 2015 at 18:02

Alan Wells

31.4k16 gold badges113 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan Wells Over a year ago

Thanks for letting me know. You can mark the answer as correct so that the check mark shows up.

Collectives™ on Stack Overflow

Validating HTML Input fields when uploading file using google HTML Service

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related