User Interface Components

// A resource reference to some object

Resource res = new ThemeResource("img/reindeer.svg");

// Display the object

Embedded object = new Embedded("My SVG", res); object.setMimeType("image/svg+xml"); // Unnecessary layout.addComponent(object);

The MIME type of the objects is usually detected automatically from the filename extension with the FileTypeResolver utility in Vaadin. If not, you can set it explicitly with setMimeType(), as was done in the example above (where it was actually unnecessary).

Some embeddable object types may require special support in the browser. You should make sure that there is a proper fallback mechanism if the browser does not support the embedded type.

5.19. Upload

The Upload component allows a user to upload files to the server. It displays a file name entry box, a file selection button, and an upload submit button. The user can either write the filename in the text area or click the Browse button to select a file. After the file is selected, the user sends the file by pressing the upload submit button.

// Create the Upload component.

Upload upload = new Upload("Upload the file here", this);

Figure 5.58. Upload Component

You can set the text of the upload button with setButtonCaption(), as in the example above, but it is difficult to change the look of the Browse button.This is a security feature of web browsers. The language of the Browse button is determined by the browser, so if you wish to have the language of the Upload component consistent, you will have to use the same language in your application.

upload.setButtonCaption("Upload Now");

The uploaded files are typically stored as files in a file system, in a database, or as temporary objects in memory. The upload component writes the received data to an java.io.OutputStream so you have plenty of freedom in how you can process the upload content.

To use the Upload component, you need to define a class that implements the Upload.Receiver interface. The receiveUpload() method is called when the user clicks the submit button. The method must return an OutputStream. To do this, it typically creates a File or a memory buffer where the stream is written.The method gets the file name and MIME type of the file, as reported by the browser.

When an upload is finished, successfully or unsuccessfully, the Upload component will emit the

Upload.FinishedEvent event.To receive it, you need to implement the Upload.FinishedListener interface, and register the listening object in the Upload component. The event object will also include the file name, MIME type, and length of the file. Notice that the more specific Upload.FailedEvent and Upload.SucceededEvent events will be called in the cases where the upload failed or succeeded, respectively.

162

Upload

User Interface Components

The following example allows uploading images to /tmp/uploads directory in (UNIX) filesystem (the directory must exist or the upload fails). The component displays the last uploaded image in an Image component.

//Create the upload with a caption and set receiver later Upload upload = new Upload("Upload Image Here", null); upload.setButtonCaption("Start Upload");

//Put the upload component in a panel

Panel panel = new Panel("Cool Image Storage"); panel.addComponent(upload);

// Show uploaded file in this placeholder

final Image image = new Image("Uploaded Image"); image.setVisible(false); panel.addComponent(image);

//Implement both receiver that saves upload in a file and

//listener for successful upload

class ImageUploader implements Receiver, SucceededListener { public File file;

public OutputStream receiveUpload(String filename, String mimeType) {

// Create upload stream

FileOutputStream fos = null; // Stream to write to try {

// Open the file for writing.

file = new File("/tmp/uploads/" + filename); fos = new FileOutputStream(file);

} catch (final java.io.FileNotFoundException e) { Notification.show(

"Could not open file<br/>", e.getMessage(), Notification.TYPE_ERROR_MESSAGE);

return null;

}

return fos; // Return the output stream to write to

}

public void uploadSucceeded(SucceededEvent event) { // Show the uploaded file in the image viewer image.setVisible(true);

image.setSource(new FileResource(file));

}

};

final ImageUploader uploader = new ImageUploader(); upload.setReceiver(uploader); upload.addListener(uploader);

The example does not check the type of the uploaded files in any way, which will cause an error if the content is anything else but an image. The program also assumes that the MIME type of the file is resolved correctly based on the file name extension. After uploading an image, the component will look as show in Figure 5.59, “Image Upload Example” below.

Upload

163