lib-gwt-file

GWTのFileUploadは、ごく普通のFormの一部として機能するらしく、なにやらサーバとのやりとりを発生させなければならないものだが（現在の私の理解）、 lib-gwt-fileを使えば、簡単な操作でクライアント側のみでファイル内容を取得することができる。しかも、FileUploadのようなファイル選択ダイアログによるものだけではなく、ドラッグドロップにも対応している。

ただし、

• HTML5の機能を使用しているらしい
• クライアント側に取得するものであり、つまりアップロードされたファイルはブラウザのメモリ内に格納されるので、その点は考慮する必要がある。

リンク

• 本家

使い方

準備

GWT2.4の場合

• lib-gwt-file-0.2.jarを取得しパスを通す。

• プロジェクトのgwt.xmlに「 <inherits name="org.vectomatic.libgwtfile" />」を追加する。

DropPanel

最も単純な場合を示す。ドロップされたテキストファイルの中身を表示する。注意事項としては、

• org.vectomatic.file.events以下のドラッグドロップイベントとハンドラはもはや使われていない。GWT標準のものが使われている。

package com.mycompany.project.client;

import org.vectomatic.dnd.*;
import org.vectomatic.file.*;

import com.google.gwt.core.client.*;
import com.google.gwt.dom.client.*;
import com.google.gwt.dom.client.Style.BorderStyle;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.ui.*;

public class ImageViewer implements EntryPoint {

  public void onModuleLoad() {
    
    RootPanel rootPanel = RootPanel.get();
    DropPanel dropPanel = new DropPanel();

    final Style style = dropPanel.getElement().getStyle();
    style.setBorderStyle(BorderStyle.SOLID);
    dropPanel.getElement().getStyle().setBorderColor("#ff0000");

    // これは不必要に思えるが、無いとブラウザ側にドロップが伝えられてしまう。
    dropPanel.addDragOverHandler(new DragOverHandler() {
      public void onDragOver(DragOverEvent e) {
        e.stopPropagation();
        e.preventDefault();
      }
    });

    dropPanel.addDropHandler(new DropHandler() {
      public void onDrop(DropEvent event) {
        processFiles(event.getDataTransfer().<DataTransferExt> cast().getFiles());
        event.stopPropagation();
        event.preventDefault();
      }
    });

    rootPanel.add(dropPanel, 5, 5);
    dropPanel.setSize("250px", "234px");
  }

  private void processFiles(FileList files) {
    System.out.println("file count:" + files.getLength());
    for (File file : files) {
      System.out.println("file:" + file.getName() + "," + file.getUrn() + "," + file.getType());
      final FileReader reader = new FileReader();
      reader.addLoadEndHandler(new org.vectomatic.file.events.LoadEndHandler() {
        @Override
        public void onLoadEnd(org.vectomatic.file.events.LoadEndEvent event) {
          System.out.println("onLoadEnd " + reader.getResult());
        }
      });
      reader.readAsText(file);
    }
  }
}

FileUploadExt

package com.mycompany.project.client;

import org.vectomatic.file.*;

import com.google.gwt.core.client.*;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.ui.*;

public class ImageViewer implements EntryPoint {

  public void onModuleLoad() {
    RootPanel rootPanel = RootPanel.get();
    final FileUploadExt fileUploadExt = new FileUploadExt();
    fileUploadExt.addChangeHandler(new ChangeHandler() {
      public void onChange(ChangeEvent event) {
        processFiles(fileUploadExt.getFiles());
      }
    });
    rootPanel.add(fileUploadExt, 10, 10);
  }

  /** processFilesはDropPanelの場合と同じ */
}

ボタンだけを表示させたい場合

package com.mycompany.project.client;

import org.vectomatic.file.*;

import com.google.gwt.core.client.*;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.ui.*;

public class ImageViewer implements EntryPoint {

  public void onModuleLoad() {
    RootPanel rootPanel = RootPanel.get();

    final FileUploadExt fileUploadExt = new FileUploadExt();
    fileUploadExt.addChangeHandler(new ChangeHandler() {
      public void onChange(ChangeEvent event) {
        processFiles(fileUploadExt.getFiles());
      }
    });
    rootPanel.add(fileUploadExt, 10, 37);
    fileUploadExt.setVisible(false);
    
    Button btnNewButton = new Button("New button");
    btnNewButton.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        fileUploadExt.click();
      }
    });
    rootPanel.add(btnNewButton, 10, 10);
  }
 
   /** processFilesはDropPanelの場合と同じ */
}