CODEWITHSUNDEEP
javascripthtmlgoogle-apps-scriptform-submit
Melvin Guerrero
Melvin Guerrero

Reputation: 361

Google App Script GAS - How can I get an <input type="file"> from a form

I am working on a small project where I have an html form on a website and I wanna use google app script (GAS) for get all form input data and send it into an email address.

So far my code works pretty well; However, I have problem to get the file from my on my html page

Here is the code I am using on GAS

function doPost(request) {
  var fname = request.parameters.txtName, femail = request.parameters.txtEmail, fnote = request.parameters.txtArea, ffile = request.parameters.fFileAttach;

  MailApp.sendEmail({
    to: "[email protected]",
    subject: "Message from webform by: " + femail,
    htmlBody: "This message was sent by the user " + fname + "<br/>" +
    "User email address: " + femail + "<br />" +
    "Email message:<br/>" + fnote,
    replyTo: femail,
    attachments: [ffile]
  });
}

Here is my html form code:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <form action="myGAS_Link" id="cc-form" method="post">
  <div class="fTop">
    <span>Name:* </span><input name="txtName" type="text" placeholder="Your Name" id="fname" required="" autofocus>
    <span>E-Mail:* </span><input name="txtEmail" type="email" placeholder="Your e-Mail" id="femail" required="">
  </div>
  <!--------------------------->
  <div class="fSet1">
    <span>Notes:</span><br/>
    <textarea name="txtArea" id="fTextArea" rows="8"></textarea>
  </div>
  <!--------------------------->
  <div class="fSub">
   <span>Upload your File:* </span><input name="fFileAttach" id="fFileAttach" type="file" required>
   <input id="submit" type="submit">
  </div>
 </form>
  </body>
</html>

Upvotes: 0

Views: 1875

Answers (1)

Tanaike
Tanaike

Reputation: 201428

How about this modification?

Modification points :

About HTML

  1. Using FileReader(), retrieve base64 encoded file, filename and mimetype.
  2. Add input with type="hidden" to #cc-form as text data. replace(/^.*,/, '') is used for removing a header of encoded data. match(/^.*(?=;)/)[0] is used for retrieving mimetype of uploading file.
  3. When a submit button is clicked, the base64 data is sent to GAS.

About GAS

  1. Retrieve data, filename and mimetype as request.parameters.data, request.parameters.filename and request.parameters.mimetype, respectively.
  2. Decode the data using Utilities.base64Decode().
  3. Create blob using Utilities.newBlob().
  4. Import the blob as an attachment file.

Modified GAS :

function doPost(request) {
  var data = Utilities.base64Decode(request.parameters.data); // Added
  var ffile = Utilities.newBlob(data, request.parameters.mimetype, request.parameters.filename); // Added

  var fname = request.parameters.txtName, femail = request.parameters.txtEmail, fnote = request.parameters.txtArea; // Modified

  MailApp.sendEmail({
    to: "[email protected]",
    subject: "Message from webform by: " + femail,
    htmlBody: "This message was sent by the user " + fname + "<br/>" +
    "User email address: " + femail + "<br />" +
    "Email message:<br/>" + fnote,
    replyTo: femail,
    attachments: [ffile]
  });

    return ContentService.createTextOutput("ok"); // Added
}

Modified HTML : (Updated)

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <!-- Added -->
  </head>
  <body>
  <form action="myGAS_Link" id="cc-form" method="post">
  <div class="fTop">
    <span>Name:* </span><input name="txtName" type="text" placeholder="Your Name" id="fname" required="" autofocus>
    <span>E-Mail:* </span><input name="txtEmail" type="email" placeholder="Your e-Mail" id="femail" required="">
  </div>
  <!--------------------------->
  <div class="fSet1">
    <span>Notes:</span><br/>
    <textarea name="txtArea" id="fTextArea" rows="8"></textarea>
  </div>
  <!--------------------------->
  <div id="data"></div> <!-- Added -->
  <div class="fSub">
   <span>Upload your File:* </span><input name="fFileAttach" id="fFileAttach" type="file" required>
   <input id="submit" type="submit">
  </div>
 </form>
  </body>

<!-- Added -->
<script>
$('#fFileAttach').on("change", function() {
    var file = this.files[0];
    var fr = new FileReader();
    fr.fileName = file.name;
    fr.onload = function(e) {
        html = '<input type="hidden" name="data" value="'+e.target.result.replace(/^.*,/, '')+'" >';
        html += '<input type="hidden" name="filename" value="'+e.target.fileName+'" >';
        html += '<input type="hidden" name="mimetype" value="' + e.target.result.match(/^.*(?=;)/)[0] + '" >';
        $("#data").empty().append(html); // Modified
    }
    fr.readAsDataURL(file);
});
</script>

</html>

Note :

  • In order to use this, after the script is modified, please redeploy Web Apps as a new version. By this, the latest script is reflected to Web Apps.
  • This sample script can upload one file. If you want to upload several files, please modify script. var file = this.files[0]; means the selected first file. When there are some files, it is files[1], files[2] ....

If I misunderstand your question, I'm sorry.

Edit :

  • Your additional question was reflected to the sample script.
    • Added <div id="data"></div>
    • Modified from $("#cc-form").append(html); to $("#data").empty().append(html);

By these modifications, the last selected file is uploaded.

Upvotes: 2

Related Questions