Upload image into Google Drive via Web App and save correspondent link on spreadsheet

user_13755425 0
Viewed 1288

This is my first approach with js and html coding, please be as much simple as possible!

I want to improve the form developed in my web App making possible to upload image. My goal is to:

  • Add input type file on my web App
  • Send the file to server side
  • Save the file in the G Drive, take the link and save it in Google Sheet

To do this I have already added in my html a file input area, but I'm not sure about how I may manage it in script section.

All the information added in the form are send to server in an object called measureInfo and I want to maintain this routine. When I try to add 

measureInfo.media = document.getElementById('fileUpload').files

it doesn't run and console return `Failed due to illegal value in property: media.

Here I report some string of code that may help to answer. If you have some suggests about how manage file in server side with DriveApp please share! 

   <script>
            measureInfo.media= document.getElementById('fileUpload').files

            google.script.run.sendToDatabase(measureInfo);
</script>

<form action="#">
    <!-- Upload File -->
    <div class="file-field input-field">
        <div class="btn-large blue darken-3">
            <span>Media</span>
            <input type="file" id= 'fileUpload' name ='fileUpload'>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder = 'Upload Media'>
        </div>
    </div>
</form>
google-drive-picker google-apps-script forms html javascript
3 Answers
user_106120110

Here's some code I use for saving receipts:

HTML with JS:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $(function(){
        google.script.run
        .withSuccessHandler(function(rObj){
          $('#dt').val(rObj.date);
        })
        .initForm();

      });
      function fileUploadJs(frmData) {
        var amt=$('#amt').val();
        var vndr=$('#vndr').val();
        var img=$('#img').val();
        if(!amt){
          window.alert('No amount provided');
          $('#amt').focus();
          return;
        }
        if(!vndr) {
          window.alert('No vendor provided');
          $('#vndr').focus();
          return;
        }
        if(!img) {
          window.alert('No image chosen');
          $('#img').focus();
        }
        document.getElementById('status').style.display ='inline';
        google.script.run
        .withSuccessHandler(function(hl){
          document.getElementById('status').innerHTML=hl;
        })
        .uploadTheForm(frmData)
      }
      console.log('My Code');
    </script>
    <style>
      input,textarea{margin:5px 5px 5px 0;}
    </style>
  </head>
   <body>
    <h3 id="main-heading">Receipt Information</h3>
    <div id="formDiv">
      <form id="myForm">
        <br /><input type="date" name="date" id="dt"/>
        <br /><input type="number" name="amount" placeholder="Amount" id="amt" />
        <br /><input type="text" name="vendor" placeholder="Vendor" id="vndr"/>
        <br /><textarea name="notes" cols="40" rows="2" placeholder="NOTES"></textarea>
        <br/>Receipt Image
        <br /><input type="file" name="receipt" id="img" />
        <br /><input type="button" value="Submit" onclick="fileUploadJs(this.parentNode)" />
      </form>
    </div>
  <div id="status" style="display: none">
  <!-- div will be filled with innerHTML after form submission. -->
  Uploading. Please wait...
  </div>  
</body>
</html>

GS:

function uploadTheForm(theForm) {
  var rObj={};
  rObj['vendor']=theForm.vendor;
  rObj['amount']=theForm.amount;
  rObj['date']=theForm.date;
  rObj['notes']=theForm.notes
  var fileBlob=theForm.receipt;
  var fldr = DriveApp.getFolderById(receiptImageFolderId);
  rObj['file']=fldr.createFile(fileBlob);
  rObj['filetype']=fileBlob.getContentType(); 
  Logger.log(JSON.stringify(rObj));
  var cObj=formatFileName(rObj);
  Logger.log(JSON.stringify(cObj));
  var ss=SpreadsheetApp.openById(SSID);
  ss.getSheetByName('Receipt Information').appendRow([cObj.date,cObj.vendor,cObj.amount,cObj.notes,cObj.file.getUrl()]);
  var html=Utilities.formatString('<br />FileName: %s',cObj.file.getName());
  return html;
}

function formatFileName(rObj) {
  if(rObj) {
    Logger.log(JSON.stringify(rObj));
    var mA=rObj.date.split('-');
    var name=Utilities.formatString('%s_%s_%s.%s',Utilities.formatDate(new Date(mA[0],mA[1]-1,mA[2]),Session.getScriptTimeZone(),"yyyyMMdd"),rObj.vendor,rObj.amount,rObj.filetype.split('/')[1]);
    rObj.file.setName(name);
  }else{
      throw('Invalid or No File in formatFileName() upload.gs');
  }
  return rObj;
}

function initForm() {
  var datestring=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd");
  return {date:datestring};
}
user_72150910 
<script>
   function preventFormSubmit(){
     var forms=document.querySelectorAll('form');
     for (var i=0;i<forms.length;i++){
       forms[i].addEventListener('submit',function(event){
         event.preventDefault();
       });
     }
   }
   window.addEventListener('load',preventFormSubmit);
   
   function handleFormSubmit(formObject){
   google.script.run.processForm(formObject);
   document.getElementById("myForm").reset();
   }
   
</script>
<script>
   function uploadTheForm(theForm) {
   var rObj={};
   rObj['vendor']=theForm.vendor;
   rObj['amount']=theForm.amount;
   rObj['date']=theForm.date;
   rObj['notes']=theForm.notes
   var fileBlob=theForm.receipt;
   var fldr = DriveApp.getFolderById(receiptImageFolderId);
   rObj['file']=fldr.createFile(fileBlob);
   rObj['filetype']=fileBlob.getContentType(); 
   Logger.log(JSON.stringify(rObj));
   var cObj=formatFileName(rObj);
   Logger.log(JSON.stringify(cObj));
   var ss=SpreadsheetApp.openById(SSID);
   ss.getSheetByName('Receipt Information').appendRow([cObj.date,cObj.vendor,cObj.amount,cObj.notes,cObj.file.getUrl()]);
   var html=Utilities.formatString('<br />FileName: %s',cObj.file.getName());
   return html;
   }
   
   function formatFileName(rObj) {
   if(rObj) {
     Logger.log(JSON.stringify(rObj));
     var mA=rObj.date.split('-');
     var name=Utilities.formatString('%s_%s_%s.%s',Utilities.formatDate(new Date(mA[0],mA[1]-1,mA[2]),Session.getScriptTimeZone(),"yyyyMMdd"),rObj.vendor,rObj.amount,rObj.filetype.split('/')[1]);
     rObj.file.setName(name);
   }else{
       throw('Invalid or No File in formatFileName() upload.gs');
   }
   return rObj;
   }
   
   function initForm() {
   var datestring=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd");
   return {date:datestring};
   }
</script>
<!DOCTYPE html>
<html lang="en">
   <head>
      <base target="_top">
      <?!= include('JavaScript'); ?>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <head>
         <script>
            $(function(){
              google.script.run
              .withSuccessHandler(function(rObj){
                $('#dt').val(rObj.date);
              })
              .initForm();
            
            });
            function fileUploadJs(frmData) {
              var amt=$('#amt').val();
              var vndr=$('#vndr').val();
              var img=$('#img').val();
              if(!amt){
                window.alert('No amount provided');
                $('#amt').focus();
                return;
              }
              if(!vndr) {
                window.alert('No vendor provided');
                $('#vndr').focus();
                return;
              }
              if(!img) {
                window.alert('No image chosen');
                $('#img').focus();
              }
              document.getElementById('status').style.display ='inline';
              google.script.run
              .withSuccessHandler(function(hl){
                document.getElementById('status').innerHTML=hl;
              })
              .uploadTheForm(frmData)
            }
            console.log('My Code');
            
         </script>
         </head
   <body>
      <div class="form-row">
      <div class="form-group col-md-12">
      <h5 style="text-align:center;">Upload Photo</h5>
      <div class="form-row">
      <div class="form-group col-md-4" style="word-wrap: break-word">
         <p3 style="text-align:left; color:red">
         Notice! Please doff eyewear & mask and avoid sunlight exposure when taking selfie!</p>
      </div>
      <div class="form-group col-md-6"><img id="output" width="200" height="200" src="https://www.citypng.com/public/uploads/small/116395943260tji5ordfujy44njydzhlidv8reqpmtun7ggx1oszpz1dcistzxnmag7do6vxkjxphlsgueuurkg9pkpbwgorvv9lratpxm38rp5.png"  alt="photo" style="border:gray; border-width:2px; border-style:solid;"/></div>
      <div class="form-group col-md-12">
         <center>
         &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;<input class="file-path validate" type="file" id="fileUpload" name="fileUpload" value='fileUpload'  accept="image/*" onchange="loadFile(event)">
         <script>
            var loadFile = function(event) {
              var output = document.getElementById('output');
              output.src = URL.createObjectURL(event.target.files[0]);
              output.onload = function() {
                URL.revokeObjectURL(output.src) // free memory
              }
            };
         </script>
      </div>
   </body>
</html>


  [1]: https://i.stack.imgur.com/98vPf.png
user_183720570
Related