13. HTML5 MediaUploadField API - klopfdreh/wicket-components-playground GitHub Wiki

The MediaUploadField API can be used to upload images / videos / audios across multiple devices. It uses the capture / accept fields of an input type file tag to tell the device which hardware support should be chosen. Please ensure that you grant access to the camera in the device settings. There are two classes:

• MediaUploadField - A field with basic capturing support
• MediaUploadFieldCustomizable - A field with image and label support to be customized

So what MediaUploadFieldCustomizable basically do if you set an image to it: It determines the default size of that image and if a photo is taken by camera it adjusts the size of that photo to the size of the default image. So the image is always rendered in the right height / width ratio and does not exceed the space of the default image. Here the file reader api is used, so ensure your device is compatible to it.

If you don't want the default input to be shown you can set a FormComponentLabel to the MediaUploadFieldCustomizable and write a text into the tag - "Test" in the example below. As in the example you can style it a bit and then you got only a picture and a button to change it with the device support.

Tested on: FireFox 37.0.2 / Safari 8.0.5 / Chrome 42.0.2311.135 / and Safari iOS 8.3

The Form has to be set to MultiPart so that greater files can be submitted.

Example of MediaUploadField:

Java:

MediaUploadField mediaUploadField 
= new MediaUploadField("fileUpload", Type.IMAGE);

HTML:

<input wicket:id="fileUpload" type="file"/>

Example of MediaUploadFieldCustomizable:

Java:

public class HomePage extends WebPage
{
	private static final long serialVersionUID = 1L;

	MediaUploadFieldCustomizable mediaFileUpload;

	private FormComponentLabel formComponentLabel;

	private Image image;

	public HomePage()
	{

		add(new FeedbackPanel("feedback"));

		Form<?> form = new Form<Void>("form")
		{
			@Override
			protected void onSubmit()
			{
				final FileUpload uploadedFile = 
					mediaFileUpload.getFileUpload();
				if (uploadedFile != null)
				{
					// ....
				}
			}
		};

		// Enable multipart mode (need for uploads file)
		form.setMultiPart(true);

		// max upload size, 10000k
		form.setMaxSize(Bytes.kilobytes(10000));

		image = new Image("image",
			new PackageResourceReference(getClass(),
				"test.jpg"));
		form.add(image);

		// Create the MediaUploadFieldCustomizable (the input will be hidden)
		mediaFileUpload = new MediaUploadFieldCustomizable(
			"fileUpload", Type.IMAGE);

		formComponentLabel = new FormComponentLabel(
			"label", mediaFileUpload);
		formComponentLabel.add(mediaFileUpload);
		form.add(formComponentLabel);

		// Add the image and the label to the media upload 
		// field so that it can interact with
		mediaFileUpload.setImage(image);
		mediaFileUpload.setLabel(formComponentLabel);
		add(form);
	}

	@Override
	public void renderHead(IHeaderResponse response)
	{
		response.render(CssHeaderItem.forCSS(
			"#" +
				formComponentLabel.getMarkupId() +
				"{border:1px solid black; display:block; width:100px; cursor:pointer;} #" +
				image.getMarkupId() +
				"{ border:1px dotted black; }", "pagecss"));
	}
}

HTML:

		<div wicket:id="feedback"></div>
		<form wicket:id="form">
			<p>
				<img wicket:id="image" />
				<br/>
				<label wicket:id="label">Test
					<input wicket:id="fileUpload" type="file"/>
				</label>
				<br/>
				<input type="submit" value="Upload" />
			</p>
		</form>