FormPanelを使用しないGoogle Apps Script FileUpload（）

Question

私はGoogle Apps Scriptを利用する最初のアプリケーションを構築中です。 Googleドキュメントリストにファイルをアップロードするためのフォームが必要です。

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を待たずしたい：私は現在Google Apps Script FileUpload docmentationに基づいて、この作業を使用してコードを持っています。上記のコードをこのように変更しようとしたとき、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コントロールを使用することはできますか？もしそうなら、どうですか？ありがとう！

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なしでの作業も含む）。

は（Googleのドキュメントの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がバックグラウンドでまだですが、この方法は、私が持っていませんそれに触れる。