title: Upload an image to a Google spreadsheet from WEB FORM
body: <p>So basically
  Its automatically generated script from google sheets. I can't find a link or anything which can help me to tweak it so i could upload an image from my website. It sends only the image name instead of an actual image.
  I would be very glad if someone could explain me how to tweak it so it would send the actual image.</p>
  <pre><code>&lt;input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email:&quot; placeholder=&quot;&quot;&gt;
   &lt;input type=&quot;file&quot; id=&quot;myFile&quot; name=&quot;filename&quot;&gt;
                      
   &lt;button&gt;
     Send
  &lt;/button&gt;
  </code></pre>
  <pre><code>Out put
  Email: Someone@gmail.com
  FileName: Untitled-1.jpg
  </code></pre>
  <pre><code>
  // if you want to store your email server-side (hidden), uncomment the next line
   var TO_ADDRESS = &quot;***@gmail.com&quot;;
  
  // spit out all the keys/values from the form in HTML for email
  // uses an array of keys if provided or the object to determine field order
  function formatMailBody(obj, order) {
    var result = &quot;&quot;;
    if (!order) {
      order = Object.keys(obj);
    }
    
   
    
    // loop over all keys in the ordered form data
    for (var idx in order) {
      var key = order[idx];
      result += &quot;&lt;h4 style='text-transform: capitalize; margin-bottom: 0'&gt;&quot; + key + &quot;&lt;/h4&gt;&lt;div&gt;&quot; + sanitizeInput(obj[key]) + &quot;&lt;/div&gt;&quot;;
      // for every key, concatenate an `&lt;h4 /&gt;`/`&lt;div /&gt;` pairing of the key name and its value, 
      // and append it to the `result` string created at the start.
    }
    return result; // once the looping is done, `result` will be one long string to put in the email body
  }
  
  // sanitize content from the user - trust no one 
  // ref: https://developers.google.com/apps-script/reference/html/html-output#appendUntrusted(String)
  function sanitizeInput(rawInput) {
     var placeholder = HtmlService.createHtmlOutput(&quot; &quot;);
     placeholder.appendUntrusted(rawInput);
    
     return placeholder.getContent();
   }
  
  function doPost(e) {
  
    try {
      Logger.log(e); // the Google Script version of console.log see: Class Logger
      record_data(e);
      
      // shorter name for form data
      var mailData = e.parameters;
  
      // names and order of form elements (if set)
      var orderParameter = e.parameters.formDataNameOrder;
      var dataOrder;
      if (orderParameter) {
        dataOrder = JSON.parse(orderParameter);
      }
      
      // determine recepient of the email
      // if you have your email uncommented above, it uses that `TO_ADDRESS`
      // otherwise, it defaults to the email provided by the form's data attribute
      var sendEmailTo = (typeof TO_ADDRESS !== &quot;undefined&quot;) ? TO_ADDRESS : mailData.formGoogleSendEmail;
      
      // send email if to address is set
      if (sendEmailTo) {
        MailApp.sendEmail({
          to: String(sendEmailTo),
          subject: &quot;Contact form submitted&quot;,
          // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
          htmlBody: formatMailBody(mailData, dataOrder)
        });
      }
  
      return ContentService    // return json success results
            .createTextOutput(
              JSON.stringify({&quot;result&quot;:&quot;success&quot;,
                              &quot;data&quot;: JSON.stringify(e.parameters) }))
            .setMimeType(ContentService.MimeType.JSON);
    } catch(error) { // if error return this
      Logger.log(error);
      return ContentService
            .createTextOutput(JSON.stringify({&quot;result&quot;:&quot;error&quot;, &quot;error&quot;: error}))
            .setMimeType(ContentService.MimeType.JSON);
    }
  }
  
  
  /**
   * record_data inserts the data received from the html form submission
   * e is the data received from the POST
   */
  function record_data(e) {
    var lock = LockService.getDocumentLock();
    lock.waitLock(30000); // hold off up to 30 sec to avoid concurrent writing
    
    try {
      Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
      
      // select the 'responses' sheet by default
      var doc = SpreadsheetApp.getActiveSpreadsheet();
      var sheetName = e.parameters.formGoogleSheetName || &quot;responses&quot;;
      var sheet = doc.getSheetByName(sheetName);
      
      var oldHeader = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
      var newHeader = oldHeader.slice();
      var fieldsFromForm = getDataColumns(e.parameters);
      var row = [new Date()]; // first element in the row should always be a timestamp
      
      // loop through the header columns
      for (var i = 1; i &lt; oldHeader.length; i++) { // start at 1 to avoid Timestamp column
        var field = oldHeader[i];
        var output = getFieldFromData(field, e.parameters);
        row.push(output);
        
        // mark as stored by removing from form fields
        var formIndex = fieldsFromForm.indexOf(field);
        if (formIndex &gt; -1) {
          fieldsFromForm.splice(formIndex, 1);
        }
      }
      
      // set any new fields in our form
      for (var i = 0; i &lt; fieldsFromForm.length; i++) {
        var field = fieldsFromForm[i];
        var output = getFieldFromData(field, e.parameters);
        row.push(output);
        newHeader.push(field);
      }
      
      // more efficient to set values as [][] array than individually
      var nextRow = sheet.getLastRow() + 1; // get next row
      sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  
      // update header row with any new data
      if (newHeader.length &gt; oldHeader.length) {
        sheet.getRange(1, 1, 1, newHeader.length).setValues([newHeader]);
      }
    }
    catch(error) {
      Logger.log(error);
    }
    finally {
      lock.releaseLock();
      return;
    }
  
  }
  
  function getDataColumns(data) {
    return Object.keys(data).filter(function(column) {
      return !(column === 'formDataNameOrder' || column === 'formGoogleSheetName' || column === 'formGoogleSendEmail' || column === 'honeypot');
    });
  }
  
  function getFieldFromData(field, data) {
    var values = data[field] || '';
    var output = values.join ? values.join(', ') : values;
    return output;
  }```
  
  
  </code></pre>