Google Apps Script FileUpload() without FormPanel?

问题

I am in the process of building my first application that makes use of Google Apps Script. I need to have a form that allows the upload of a file to a Google Documents List. I currently have this working using code based on the Google Apps Script FileUpload docmentation :

function doGet(e) { 
  var app = UiApp.createApplication().setTitle("Upload CSV to Sheet");
  var form = app.createFormPanel().setId('frm').setEncoding('multipart/form-data');
  var formContent = app.createVerticalPanel();
  form.add(formContent);  
  formContent.add(app.createFileUpload().setName('thefile'));
  formContent.add(app.createSubmitButton('Submit'));
  app.add(form);
  return app;
}

function doPost(e) {
  // data returned is a blob for FileUpload widget
  var fileBlob = e.parameter.thefile;
  var doc = DocsList.createFile(fileBlob);
  app.close();
  return app;
}

However, I would like to specify my own click handlers for the Submit button and not wait for the POST if possible. When I tried to change the code above to something like this, the reference to e.parameter.thefile is null and does not contain the file blob.

function doGet(e) {

  var app = UiApp.createApplication().setTitle("Upload CSV to Sheet");
  var formContent = app.createVerticalPanel(); 
  var submitServerHandler = app.createServerClickHandler('submitHandler_');
  formContent.add(app.createFileUpload().setName('thefile'));
  submitServerHandler.addCallbackElement(formContent);  
  formContent.add(app.createButton('Submit').addClickHandler(submitServerHandler));  
  app.add(formContent);
  return app;
}

function submitHandler_(e) {
  // data returned is a blob for FileUpload widget
  var fileBlob = e.parameter.thefile;
  var doc = DocsList.createFile(fileBlob);
  app.close();
  return app;
}

Is it possible to use the FileUpload control without a FormPanel? If so, how? Thanks!

回答1:

You must use doPost for the file upload to work. You can add more click handlers to the submit button. If you want a fast response on the UI use a client side handler. Anything you have on the form panel that is named will be passed in e.parameter and you can use hiddens like in a normal html form.

What is it that you want to do? That would help me give you a better answer.

回答2:

function doGet(e) { 
  var app = UiApp.createApplication(); 
  var panel = app.createVerticalPanel().setId('panel');
  var fileUpload = app.createFileUpload().setName('theFile').setId('theFile');
  var handler = app.createServerChangeHandler('uploadfile');
  handler.addCallbackElement(panel);
  fileUpload.addChangeHandler(handler);
  panel.add(fileUpload);
  app.add(panel);
  return app;
} 

function uploadfile(e) 
{ 
// data returned which can be used to create a blob
// assuming mime-type to be a zip file in this example
  var fileBlob = Utilities.newBlob(e.parameter.thefile, "application/zip","myZippedFile.zip" );
  var doc = DocsList.createFile(fileBlob);
  var app = UiApp.getActiveApplication();
  app.getElementById('panel').add(app.createLabel('File Uploaded successfully'));
  return app;
}

From https://sites.google.com/site/appsscripttutorial/user-interface/upload-doc

回答3:

An alternative approach to uploading files is using createDocsListDialog(). This only allows selecting files from the user's Google Drive, but on the other hand you can do a lot with these files (including working with them without a FormPanel).

(See https://developers.google.com/apps-script/reference/ui/docs-list-dialog for Google's documentation.)

回答4:

I've worked a bit more on file uploads, and I wrote some helper functions creating a 'pseudo widget' that can be used in the same way as other UI elements.

I've added it to a collection of helper functions at https://github.com/Itangalo/gash, in case it may help others too.

If you add the code in gash.gs from the site above, you can manage file uploads like this:

function doGet() {
  var app = UiApp.createApplication();

  // We must have a handler set up before creating the file upload.
  var handler = app.createServerHandler('handlerCallback');
  app.add(gash.createFileUpload('myFile', handler));

  app.add(app.createButton('Do something with the file', handler));

  return app;
}

function handlerCallback(eventInfo) {
  // The ID of the file in Google Drive is stored in the parameters.
  var file = DocsList.getFileById(eventInfo.parameter.myFile);
  // The file was uploaded to the trash. Don't forget to un-trash it.
  file.setTrashed(false);

  // Do whatever you want with the file.
  var app = UiApp.getActiveApplication();
  app.add(app.createLabel('Your file size in bytes: ' + file.getSize()));
  return app;
}

There is still a FormPanel in the background, but this way I don't have to touch it.

来源：https://stackoverflow.com/questions/8086352/google-apps-script-fileupload-without-formpanel