Google Apps腳本FileUpload（）沒有FormPanel？

Question

我正在構建我的第一個使用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; 
} 

不過，我想指定我自己的點擊處理程序的提交按鈕，如果可以不等待POST。當我試圖將上面的代碼更改爲這樣的內容時，對e.parameter.thefile的引用爲空，並且不包含文件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控件？如果是這樣，怎麼樣？謝謝！

Answer 1

您必須使用doPost才能使文件上傳正常工作。您可以將更多點擊處理程序添加到提交按鈕。如果你想在UI上做出快速響應，請使用客戶端處理程序。任何你在表單面板上命名的東西都會在e.parameter中傳遞，你可以像普通的HTML表單那樣使用hiddens。

你想要做什麼？這會幫助我給你更好的答案。

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

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

Answer 3

的另一種方法將文件上載使用createDocsListDialog（）。這隻允許從用戶的Google雲端硬盤中選擇文件，但另一方面，您可以使用這些文件做很多事情（包括在沒有FormPanel的情況下使用它們）。

（谷歌的文檔見https://developers.google.com/apps-script/reference/ui/docs-list-dialog）

Answer 4

我的文件上傳的工作多一點，我寫了一些輔助功能，創建一個可以以同樣的方式與其他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中，但這種方式我沒有觸摸它。