Google Apps脚本文件上传状态指示器clickhandler

Question

Taking components from a couple other examples . I pieced together the following script (can run it here ):

var submissionSSKey = '0AhpMXVz35LNCdG1Qa0c2V1hHRnhOUU00SjQ0SEdlRVE';
var Panelstyle = {'background':'#dddddd','padding':'40px','borderStyle':'solid','borderWidth':'10PX','borderColor':'#bbbbbb'}

function doGet() {

  var app = UiApp.createApplication().setTitle('PQOT File Upload').setStyleAttribute('padding','50PX');
  var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(500, 200);
  var title = app.createHTML('<B>File Upload</B>').setStyleAttribute('color','grey').setStyleAttribute('fontSize','25PX');
  var grid = app.createGrid(8,4).setId('grid');
  var RequestID = app.createTextBox().setWidth('250px').setName('reqID');
  var unix = app.createTextBox().setWidth('250px').setName('unix');
  var upLoad = app.createFileUpload().setName('uploadedFile');
  var submitButton = app.createSubmitButton('<B>Upload</B>'); 
  var warning = app.createHTML('Please fill in all fields')
      .setStyleAttribute('background','#ff6262')
      .setStyleAttribute('fontSize','18px');
  var uploadtracker = app.createTextBox().setVisible(false);

  var cliHandler2 = app.createClientHandler()
      .validateLength(RequestID, 5, 5)
      .validateInteger(RequestID)
      .validateLength(unix, 1, 12)
      .validateMatches(uploadtracker, 'selected')
      .forTargets(submitButton).setEnabled(true)
      .forTargets(warning).setHTML('File upload ready')
      .setStyleAttribute('background','#99FF99')
      .setStyleAttribute('fontSize','18px');

  var cliHandler3 = app.createClientHandler()
      .forTargets(uploadtracker)
      .setText('selected')

  grid.setWidget(0, 1, title)
      .setText(1, 0, 'PQOT Request # (5 digits):')
      .setWidget(1, 1, RequestID.addKeyUpHandler(cliHandler2))
      .setText(2, 0, 'Enter Unix ID:')
      .setWidget(2, 1, unix.addKeyUpHandler(cliHandler2))
      .setText(3, 0, 'Select File:')
      .setWidget(3, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
      .setText(5, 0, 'Completion Check:')
      .setWidget(5, 1, warning)
      .setWidget(6, 3, submitButton)
      .setWidget(7,0,uploadtracker).addClickHandler(cliHandler2);


  var cliHandler = app.createClientHandler()
      .forTargets(warning).setHTML('FILE UPLOADING...')
      .setStyleAttribute('background','#FEFE22')
      .setStyleAttribute('fontSize','18px')
      .setVisible(true);

  submitButton.addMouseUpHandler(cliHandler)
      .setEnabled(false);  



   panel.add(grid);
   app.add(panel);
   return app;
}



function doPost(e) {
  var app = UiApp.getActiveApplication();
  var reqID = e.parameter.reqID;
  var unix = e.parameter.unix;
  var fileBlob = e.parameter.uploadedFile;
  var doc = DocsList.createFile(fileBlob);
  var timestamp = Utilities.formatDate(new Date(), "PST", "MM-dd-yyyy HH:mm:ss"); 
  var description = 'Requestor Unix: '+ unix + '  PQOT Request ID: ' + reqID + ' Timestamp: ' + timestamp
  doc.setDescription(description)
  var folder = DocsList.getFolder ('PQOT Upload')
  doc.addToFolder(folder);
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheetByName('Sheet1');
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 3).setValues([[reqID,unix,doc.getUrl()]]);
  var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(500, 200);
  var label = app.createLabel('Thank you!  Your file was uploaded successfully.  To submit another, please refresh your browser: (windows - F5, mac - ⌘ + r). ');


   label.setStyleAttribute("color", "green")
        .setStyleAttribute("fontSize", "large");
        label.setStyleAttribute("text-align","left");
        label.setSize(300,200);

  panel.add(label);
  app.add(panel)      
   return app;
}

Everything is working great however I noticed that the intermediate message "File uploading..." is not displaying. This section:

  var cliHandler = app.createClientHandler()
      .forTargets(warning).setHTML('FILE UPLOADING...')
      .setStyleAttribute('background','#FEFE22')
      .setStyleAttribute('fontSize','18px')
      .setVisible(true);

I verified that the bug is also occurring in the similar scripts. I'm thinking it is something to do with the introduction of the 3rd click handler. Anyway, this section of the code doesn't seem to be running or the widget is not visible for some reason.

Answer 1

Here is a working version of your code, I made very few changes but I still have a couple of questions :

1. What is the uploadtracker widget for ? I removed the handler on this (invisible) widget and it started working... It was target AND source altogether... not a good idea ;-)
2. In the doPost you used a formPanel to put your "thank you" label... did it work in your test ? In my test it caused an error, so I replaced by a verticalPanel and it fixed the error. Had you an idea behind that ?

Now the code :

function doGet() {
  var app = UiApp.createApplication().setTitle('PQOT File Upload').setStyleAttribute('padding','50PX');
  var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(500, 200);
  var title = app.createHTML('<B>File Upload</B>').setStyleAttribute('color','grey').setStyleAttribute('fontSize','25PX');
  var grid = app.createGrid(8,4).setId('grid');
  var RequestID = app.createTextBox().setWidth('250px').setName('reqID');
  var unix = app.createTextBox().setWidth('250px').setName('unix');
  var upLoad = app.createFileUpload().setName('uploadedFile');
  var submitButton = app.createSubmitButton('<B>Upload</B>').setEnabled(false); 
  var warning = app.createHTML('Please fill in all fields')
  .setStyleAttribute('background','#ff6262')
  .setStyleAttribute('fontSize','18px');
  var uploadtracker = app.createTextBox().setVisible(false);

  var cliHandler1 = app.createClientHandler()
  .forTargets(warning).setHTML('FILE UPLOADING...')
  .setStyleAttribute('background','#FEFE22')
  .setStyleAttribute('fontSize','18px')
  .setVisible(true);

  var cliHandler2 = app.createClientHandler()
  .validateLength(RequestID, 5, 5)
  .validateInteger(RequestID)
  .validateLength(unix, 1, 12)
  .validateMatches(uploadtracker, 'selected')
  .forTargets(submitButton).setEnabled(true)
  .forTargets(warning).setHTML('File upload ready')
  .setStyleAttribute('background','#99FF99')
  .setStyleAttribute('fontSize','18px');

  var cliHandler3 = app.createClientHandler()
  .forTargets(uploadtracker)
  .setText('selected');;

  grid.setWidget(0, 1, title)
      .setText(1, 0, 'PQOT Request # (5 digits):')
      .setWidget(1, 1, RequestID.addKeyUpHandler(cliHandler2))
      .setText(2, 0, 'Enter Unix ID:')
      .setWidget(2, 1, unix.addKeyUpHandler(cliHandler2))
      .setText(3, 0, 'Select File:')
      .setWidget(3, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
      .setText(5, 0, 'Completion Check:')
      .setWidget(5, 1, warning)
      .setWidget(6, 3, submitButton)
      .setWidget(7,0,uploadtracker);



  submitButton.addClickHandler(cliHandler1);  



   panel.add(grid);
   app.add(panel);
   return app;
}



function doPost(e) {
  var app = UiApp.getActiveApplication();
  var reqID = e.parameter.reqID;
  var unix = e.parameter.unix;
  var fileBlob = e.parameter.uploadedFile;
  var doc = DocsList.createFile(fileBlob);
  var timestamp = Utilities.formatDate(new Date(), "PST", "MM-dd-yyyy HH:mm:ss"); 
  var description = 'Requestor Unix: '+ unix + '  PQOT Request ID: ' + reqID + ' Timestamp: ' + timestamp
  doc.setDescription(description)
  var folder = DocsList.getFolder ('PQOT Upload')
  doc.addToFolder(folder);
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheetByName('Sheet1');
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 3).setValues([[reqID,unix,doc.getUrl()]]);
  var panel = app.createVerticalPanel().setStyleAttributes(Panelstyle).setPixelSize(500, 200);
  var label = app.createLabel('Thank you!  Your file was uploaded successfully.  To submit another, please refresh your browser: (windows - F5, mac - ⌘ + r). ');


   label.setStyleAttribute("color", "green")
        .setStyleAttribute("fontSize", "large");
        label.setStyleAttribute("text-align","left");
        label.setSize(300,200);

  panel.add(label);
  app.add(panel)      
   return app;
}

---

EDIT : NOTE

Even with the "selected" trick it doesn't prevent the case of a user going back and delete some fields, same for the fileupload if one remove the file it doesn't update the validation of the button. I'm afraid it's a job to handle in the server handler (doPost) to trap all errors and re-submit the form. There is an interesting recent post from Mogsdad about multi step forms : link