Integration for: https://github.com/kartik-v/bootstrap-fileinput

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/fileinput/BootstrapFileUploadField.java

@@ -0,0 +1,139 @@
+package de.agilecoders.wicket.extensions.markup.html.bootstrap.fileinput;
+
+import java.util.List;
+
+import org.apache.wicket.ajax.AjaxRequestTarget;
+import org.apache.wicket.ajax.form.AjaxFormSubmitBehavior;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
+import org.apache.wicket.markup.html.form.upload.FileUpload;
+import org.apache.wicket.markup.html.form.upload.FileUploadField;
+import org.apache.wicket.model.IModel;
+
+import de.agilecoders.wicket.extensions.markup.html.bootstrap.fileinput.release.FileinputCssReference;
+import de.agilecoders.wicket.extensions.markup.html.bootstrap.fileinput.release.FileinputJsReference;
+import de.agilecoders.wicket.jquery.util.Strings2;
+
+public class BootstrapFileUploadField extends FileUploadField {
+
+	private static final String UPLOAD_BUTTON_CLASS = "fileinput-upload-button";
+	private static final String AJAX_EVENT_NAME_SUFFIX = "_fileinput-upload-button-clicked";
+
+	private final AjaxFormSubmitBehavior ajaxBehavior;
+	private boolean showCaption = false;
+	private boolean showPreview = true;
+	private boolean showRemove = false;
+	private boolean showUpload = true;
+
+    public BootstrapFileUploadField(String id) {
+        this(id, null);
+    }
+
+	public BootstrapFileUploadField(final String id,
+			final IModel<List<FileUpload>> model) {
+		super(id, model);
+		String ajaxEventName = Strings2.getMarkupId(this) + AJAX_EVENT_NAME_SUFFIX;
+		ajaxBehavior = newAjaxFormSubmitBehavior(ajaxEventName);
+		add(ajaxBehavior);
+	}
+
+	protected AjaxFormSubmitBehavior newAjaxFormSubmitBehavior(
+			final String event) {
+		return new AjaxFormSubmitBehavior(event) {
+			@Override
+			protected void onSubmit(AjaxRequestTarget target) {
+				target.add(getForm());
+			}
+
+			@Override
+			protected void onError(AjaxRequestTarget target) {
+				onSubmit(target);
+			}
+		};
+	}
+
+	@Override
+	public void renderHead(final IHeaderResponse response) {
+		FileinputJsReference.INSTANCE.renderHead(response);
+		FileinputCssReference.INSTANCE.renderHead(response);
+		response.render(OnDomReadyHeaderItem.forScript(createScript()));
+	}
+
+	public boolean isShowCaption() {
+		return showCaption;
+	}
+
+	public BootstrapFileUploadField withShowCaption(final boolean showCaption) {
+		this.showCaption = showCaption;
+		return this;
+	}
+
+	public boolean isShowPreview() {
+		return showPreview;
+	}
+
+	public BootstrapFileUploadField withShowPreview(final boolean showPreview) {
+		this.showPreview = showPreview;
+		return this;
+	}
+
+	public boolean isShowRemove() {
+		return showRemove;
+	}
+
+	public BootstrapFileUploadField withShowRemove(final boolean showRemove) {
+		this.showRemove = showRemove;
+		return this;
+	}
+
+	public boolean isShowUpload() {
+		return showUpload;
+	}
+
+	public BootstrapFileUploadField withShowUpload(final boolean showUpload) {
+		this.showUpload = showUpload;
+		return this;
+	}
+
+	private CharSequence createScript() {
+		final StringBuilder sb = new StringBuilder();
+		sb.append("$('#");
+		sb.append(Strings2.getMarkupId(this));
+		sb.append("').fileinput({");
+		sb.append("showCaption: ");
+		sb.append(isShowCaption());
+		sb.append(", showPreview: ");
+		sb.append(isShowPreview());
+		sb.append(", showRemove: ");
+		sb.append(isShowRemove());
+		sb.append(", showUpload: ");
+		sb.append(isShowUpload());
+		sb.append(", uploadClass: 'btn btn-default ");
+		sb.append(UPLOAD_BUTTON_CLASS);
+		sb.append("'");
+		for (final String label : new String[] { "browseLabel", "removeLabel",
+				"uploadLabel", "msgLoading", "msgProgress", "msgSelected" }) {
+			sb.append(", ");
+			sb.append(label);
+			sb.append(": '");
+			sb.append(getString(label));
+			sb.append("'");
+		}
+		sb.append("});\n");
+
+		// bind ajax submit behavior on upload button click
+		sb.append("$('.file-input:has(#");
+		sb.append(Strings2.getMarkupId(this));
+		sb.append(") .");
+		sb.append(UPLOAD_BUTTON_CLASS);
+		sb.append("').click(function(e){\n");
+		sb.append("    e.preventDefault();\n");
+		sb.append("    $('#");
+		sb.append(Strings2.getMarkupId(this));
+		sb.append("').triggerHandler('");
+		sb.append(ajaxBehavior.getEvent());
+		sb.append("');\n");
+		sb.append("});");
+		return sb;
+	}
+}

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/fileinput/BootstrapFileUploadField.properties

@@ -0,0 +1,6 @@
+browseLabel=Browse …
+removeLabel=Remove
+uploadLabel=Upload
+msgLoading=Loading …
+msgProgress=Loaded {percent}% of {file}
+msgSelected={n} files selected

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/fileinput/BootstrapFileUploadField_de.properties

@@ -0,0 +1,6 @@
+browseLabel=Durchsuchen …
+removeLabel=Entfernen
+uploadLabel=Hochladen
+msgLoading=Lade …
+msgProgress={percent}% geladen von {file}
+msgSelected={n} Dateien ausgew\u00E4hlt

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/fileinput/release/FileinputCssReference.java

@@ -0,0 +1,24 @@
+package de.agilecoders.wicket.extensions.markup.html.bootstrap.fileinput.release;
+
+import javax.annotation.concurrent.Immutable;
+
+import org.apache.wicket.markup.head.CssHeaderItem;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.html.IHeaderContributor;
+import org.apache.wicket.request.resource.CssResourceReference;
+
+@Immutable
+public final class FileinputCssReference extends CssResourceReference implements IHeaderContributor {
+
+    public static final FileinputCssReference INSTANCE = new FileinputCssReference();
+
+    private FileinputCssReference() {
+        super(FileinputCssReference.class, "fileinput.css");
+    }
+
+    @Override
+    public void renderHead(final IHeaderResponse response) {
+        response.render(CssHeaderItem.forReference(this));
+    }
+
+}

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/fileinput/release/FileinputJsReference.java

@@ -0,0 +1,35 @@
+package de.agilecoders.wicket.extensions.markup.html.bootstrap.fileinput.release;
+
+import javax.annotation.concurrent.Immutable;
+
+import org.apache.wicket.Application;
+import org.apache.wicket.markup.head.HeaderItem;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.head.JavaScriptHeaderItem;
+import org.apache.wicket.markup.html.IHeaderContributor;
+import org.apache.wicket.request.resource.JavaScriptResourceReference;
+
+import de.agilecoders.wicket.core.util.Dependencies;
+
+@Immutable
+public final class FileinputJsReference extends JavaScriptResourceReference implements IHeaderContributor {
+
+    public static final FileinputJsReference INSTANCE = new FileinputJsReference();
+
+    private FileinputJsReference() {
+        super(FileinputJsReference.class, "fileinput.js");
+    }
+
+    @Override
+    public Iterable<? extends HeaderItem> getDependencies() {
+        return Dependencies.combine(
+                super.getDependencies(),
+                JavaScriptHeaderItem.forReference(Application.get().getJavaScriptLibrarySettings().getJQueryReference()));
+    }
+
+    @Override
+    public void renderHead(final IHeaderResponse response) {
+        response.render(JavaScriptHeaderItem.forReference(this));
+    }
+
+}

bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/fileinput/release/fileinput.css

@@ -0,0 +1,103 @@
+/*!
+ * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
+ * @package yii2-widgets
+ * @version 1.6.0
+ *
+ * File input styling for Bootstrap 3.0
+ * Built for Yii Framework 2.0
+ * Author: Kartik Visweswaran
+ * Year: 2013
+ * For more Yii related demos visit http://demos.krajee.com
+ */
+.btn-file {
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-file input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 999px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    background: red;
+    cursor: inherit;
+    display: block;
+}
+
+.file-caption-disabled {
+    background-color: #EEEEEE;
+    cursor: not-allowed;
+    opacity: 1;
+}
+
+.file-input .btn[disabled], .file-input .btn .disabled {
+    cursor: not-allowed;
+}
+
+.file-preview {
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    padding: 5px;
+    width: 100%;
+    margin-bottom: 5px;
+}
+
+.file-preview-frame {
+    display: table;
+    margin: 8px;
+    height: 160px;
+    border: 1px solid #ddd;
+    box-shadow: 1px 1px 5px 0px #a2958a;
+    padding: 6px;
+    float: left;
+    text-align: center;
+}
+
+.file-preview-frame:hover {
+    background-color: #eee;
+    box-shadow: 2px 2px 5px 0px #333;
+}
+
+.file-preview-image {
+    height: 150px;
+    vertical-align: text-center;
+}
+
+.file-preview-text {
+    display: table-cell;
+    width: 150px;
+    height: 150px;
+    color: #428bca;
+    font-size: 11px;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.file-preview-other {
+    display: table-cell;
+    width: 150px;
+    height: 150px;
+    font-family: Monaco, Consolas, monospace;
+    font-size: 11px;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button {
+    display: none;
+}
+
+.loading {
+    background: transparent url('../img/loading.gif') no-repeat scroll center center content-box !important;
+}
+
+.wrap-indicator {
+    font-weight: bold;
+    color: #245269;
+    cursor: pointer;
+}