没有FormPanel的Google Apps脚本FileUpload()?

时间:2011-11-10 21:11:12

标签: javascript file-upload google-apps-script

我正在构建第一个使用Google Apps脚本的应用程序。我需要一个允许将文件上传到Google文档列表的表单。我目前使用基于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;
}

但是,我想为Submit按钮指定我自己的点击处理程序,如果可能的话不要等待POST。当我尝试将上面的代码更改为类似内容时,对 e.parameter.thefile 的引用为null,并且不包含文件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;
}

是否可以在没有FormPanel的情况下使用FileUpload控件?如果是这样,怎么样?谢谢!

4 个答案:

答案 0 :(得分:4)

您必须使用doPost才能使文件上传起作用。您可以在提交按钮中添加更多点击处理程序。如果您想在UI上快速响应,请使用客户端处理程序。您在命名的表单面板上的任何内容都将在e.parameter中传递,您可以像普通的html格式一样使用hiddens。

你想做什么?那会帮助我给你一个更好的答案。

答案 1 :(得分:1)

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;
}

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

答案 2 :(得分:0)

上传文件的另一种方法是使用createDocsListDialog()。这只允许从用户的Google云端硬盘中选择文件,但另一方面,您可以使用这些文件做很多事情(包括在没有FormPanel的情况下使用它们)。

(有关Google的文档,请参阅https://developers.google.com/apps-script/reference/ui/docs-list-dialog。)

答案 3 :(得分:0)

我在文件上传方面做了一些工作,我写了一些辅助函数来创建一个伪小部件'可以与其他UI元素一样使用。

我已将其添加到https://github.com/Itangalo/gash的帮助函数集合中,以防它也可以帮助其他函数。

如果您从上面的网站添加gash.gs中的代码,您可以像这样管理文件上传:

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;
}

背景中仍然有一个FormPanel,但这样我就不必触摸它。