Uploading data & image into Google spreadsheet

Question

I'm trying to have users fill a form and I have the form all done here https://docs.google.com/forms/d/1mjDLcGvcVlSG0Tjfx2ZEvGdrFqvQo-ezaB1A4vaBFK8/viewform

I have read through the answers here Upload an image to a Google spreadsheet I have two issues:

1. How to call the form I have, rather than the one in this code

   var submissionSSKey = 'google sskey';
   var docurl = 'google form url'
   var listitems = ['Gender','Male','Female']
   var Panelstyle = {'background':'#dddddd','padding':'40px','borderStyle':'solid','borderWidth':'10PX','borderColor':'#bbbbbb'}
   
   function doGet() {
     var app = UiApp.createApplication().setTitle('Biodata').setStyleAttribute('padding','50PX');
     var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(400, 200);
     var title = app.createHTML('<B>89 Law School Class Alumni Biodata</B>').setStyleAttribute('color','grey').setStyleAttribute('fontSize','25PX');
     var grid = app.createGrid(6,2).setId('grid');
     var list1 = app.createListBox().setName('list1').setWidth('130');
      for(var i in listitems){list1.addItem(listitems[i])}    
     var Textbox1 = app.createTextBox().setWidth('150px').setName('TB1');
     var email = app.createTextBox().setWidth('150px').setName('mail');
     var upLoad = app.createFileUpload().setName('uploadedFile');
     var submitButton = app.createSubmitButton('<B>Submit</B>'); 
     var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#bbbbbb').setStyleAttribute('fontSize','18px');
     //file upload
     var cliHandler2 = app.createClientHandler()
     .validateLength(Textbox1, 1, 40).validateNotMatches(list1,'Select a category').validateEmail(email).validateNotMatches(upLoad, 'FileUpload')
     .forTargets(submitButton).setEnabled(true)
     .forTargets(warning).setHTML('Now you can submit your form').setStyleAttribute('background','#99FF99').setStyleAttribute('fontSize','12px');
   
     //Grid layout of items on form
     grid.setWidget(0, 1, title)
         .setText(1, 0, 'Category')
         .setWidget(1, 1, list1.addClickHandler(cliHandler2))
         .setText(2, 0, 'Name')
         .setWidget(2, 1, Textbox1.addClickHandler(cliHandler2))
         .setText(3, 0, 'Email')
         .setWidget(3, 1, email)
         .setText(4, 0, 'Image File')
         .setWidget(4, 1, upLoad.addChangeHandler(cliHandler2))
         .setWidget(5, 0, submitButton)
         .setWidget(5, 1, warning);
   
     var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE THE FILE IS UPLOADING<B>').setStyleAttribute('background','yellow');
     submitButton.addClickHandler(cliHandler).setEnabled(false);  
     panel.add(grid);
     app.add(panel);
     return app;
   }
   
   
   function doPost(e) {
     var app = UiApp.getActiveApplication();
     var ListVal = e.parameter.list1;
     var textVal = e.parameter.TB1;
     var Email = e.parameter.mail;
     var fileBlob = e.parameter.uploadedFile;
     var blob = fileBlob.setContentTypeFromExtension()
     var img = DocsList.createFile(blob);
     try{
     var folder = DocsList.getFolder('photos');
     }catch(e){DocsList.createFolder('photos');var folder = DocsList.getFolder('photos')}
     img.addToFolder(folder);
     img.removeFromFolder(DocsList.getRootFolder());
     var weight = parseInt(img.getSize()/1000);
     var sheet = SpreadsheetApp.openById(submissionSSKey).getSheetByName('Sheet1');
     var lastRow = sheet.getLastRow();
     var targetRange = sheet.getRange(lastRow+1, 1, 1, 4).setValues([[ListVal,textVal,Email,"https://drive.google.com/uc?export=view&id="+img.getId()]]);
     var imageInsert = sheet.getRange(lastRow+1, 5).setFormula('=image("https://drive.google.com/uc?export=view&id='+img.getId()+'")');
     sheet.setRowHeight(lastRow+1, 80);
     var GDoc = DocumentApp.openByUrl(docurl)
     GDoc.appendTable([['Category : '+ListVal,'Name : '+textVal,'Email : '+Email]])
     var inlineI = GDoc.appendImage(img);
     var width = inlineI.getWidth();
     var newW = width;
     var height = inlineI.getHeight();
     var newH = height;
     var ratio = width/height;
     Logger.log('w='+width+'h='+height+' ratio='+ratio);
     if(width>640){
     newW = 640;
     newH = parseInt(newW/ratio);
     }
     inlineI.setWidth(newW).setHeight(newH)
     GDoc.appendParagraph('IMAGE size : '+width+' x '+height+' (eventually) resized to '+newW+' x '+newH+' for PREVIEW ('+weight+' kB)   ');
     GDoc.appendHorizontalRule();
     GDoc.saveAndClose();
     app.add(app.createLabel('Thank you for submitting'));
     return app
   }
   

2. I'm getting "Cannot read property "parameter" from undefined" when I run doPost(e)

Any idea what I should do, pls? I'm kinda behind schedule

Many thanks

Answer 1

in relation with your 2 questions :

1. You can't mix a form built with FormApp and a form built using UiApp, you'll have to build the entire form using UiApp if you want to keep the file upload feature as it is. As an alternative , you can of course build the entire form using HTMLService if you are more comfortable with html...
2. If you try to run the doPost function from the script editor you will always get an undefined value for e since e is actually the event info that holds all the elements returned by the doGet call (also known as callback element)

I've been looking at your form and I think it should be quite easy to transpose it in UiApp since all the fields are simple textBox elements. The post you used makes use of clientHandlers to make some fields mandatory so you have all the necessary informations to build your own form.

If you want to make it "look like" your form just change the style attributes of the panel and eventually add more style attributes to some items. Available CSS like styles are viewable here.