Commit 08b3e557 authored by Canh Ngo's avatar Canh Ngo

CMS7-9197: added jquery-single-fileupload widget and used in image picker of the CKEditor

parent b37f316d
......@@ -13,6 +13,7 @@ api/nbproject
api/node_modules
api/repository
api/src/main/java/org/hippoecm/frontend/plugins/standards/list/.AbstractListingPlugin.java.swp
api/src/main/resources/rebel.xml
api/src/main/styling/node_modules
api/target
api/tm.epoch
......@@ -87,6 +88,7 @@ console/*.iml
console/.project
console/.settings
console/frontend/*.iml
console/frontend/*.log
console/frontend/*.tmp
console/frontend/.classpath
console/frontend/.project
......
......@@ -30,7 +30,7 @@ import org.apache.wicket.request.resource.JavaScriptResourceReference;
/**
* Contributes all CSS/JS resources needed by http://blueimp.github.com/jQuery-File-Upload/
*/
abstract public class FileUploadBehavior extends AbstractAjaxBehavior {
public abstract class FileUploadBehavior extends AbstractAjaxBehavior {
private static final long serialVersionUID = 1L;
private static final String JQUERY_FILEUPLOAD_CSS = "css/jquery.fileupload.css";
......
......@@ -18,7 +18,6 @@ package org.hippoecm.frontend.plugins.jquery.upload;
import java.util.List;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.form.AjaxFormSubmitBehavior;
import org.apache.wicket.markup.html.form.upload.FileUpload;
import org.apache.wicket.markup.html.form.upload.FileUploadField;
......@@ -27,9 +26,7 @@ import org.hippoecm.frontend.plugins.AbstractFileUploadWidget;
import org.hippoecm.frontend.plugins.yui.upload.validation.FileUploadValidationService;
/**
* @author cngo
* @version $Id$
* @since 2015-01-05
* Single file upload using Wicket file-upload mechanism
*/
public abstract class SingleFileUploadWidget extends AbstractFileUploadWidget {
......
<!DOCTYPE html>
<!--
Copyright 2015 Hippo B.V. (http://www.onehippo.com)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
<div wicket:id="fileUploadBar"/>
</wicket:panel>
</html>
/*
* Copyright 2015 Hippo B.V. (http://www.onehippo.com)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.hippoecm.frontend.plugins.jquery.upload.single;
import java.util.HashMap;
import java.util.Map;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.behavior.AbstractAjaxBehavior;
import org.apache.wicket.behavior.IBehaviorListener;
import org.apache.wicket.markup.html.form.upload.FileUpload;
import org.apache.wicket.request.mapper.parameter.PageParameters;
import org.apache.wicket.util.string.interpolator.MapVariableInterpolator;
import org.apache.wicket.util.upload.FileItem;
import org.hippoecm.frontend.plugin.config.IPluginConfig;
import org.hippoecm.frontend.plugins.AbstractFileUploadWidget;
import org.hippoecm.frontend.plugins.jquery.upload.FileUploadViolationException;
import org.hippoecm.frontend.plugins.jquery.upload.behaviors.AjaxCallbackUploadDoneBehavior;
import org.hippoecm.frontend.plugins.jquery.upload.behaviors.AjaxFileUploadBehavior;
import org.hippoecm.frontend.plugins.jquery.upload.behaviors.FileUploadInfo;
import org.hippoecm.frontend.plugins.jquery.upload.multiple.FileUploadWidget;
import org.hippoecm.frontend.plugins.yui.upload.validation.FileUploadValidationService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
/**
* The single-file-upload widget using jquery-file-upload
*/
public abstract class JQuerySingleFileUploadWidget extends AbstractFileUploadWidget {
private static final long serialVersionUID = 1L;
final Logger log = LoggerFactory.getLogger(JQuerySingleFileUploadWidget.class);
private final String UPLOADING_SCRIPT_TEMPLATE = "$('#${componentMarkupId}').data('blueimp-fileupload').uploadFile();";
private SingleFileUploadBar fileUploadBar;
private AbstractAjaxBehavior ajaxCallbackDoneBehavior;
private AjaxFileUploadBehavior ajaxFileUploadBehavior;
public JQuerySingleFileUploadWidget(final String uploadPanel, final IPluginConfig pluginConfig, final FileUploadValidationService validator,
final boolean autoUpload) {
super(uploadPanel, pluginConfig, validator);
this.settings.setAutoUpload(autoUpload);
createComponents();
}
public JQuerySingleFileUploadWidget(final String uploadPanel, final IPluginConfig pluginConfig, final FileUploadValidationService validator) {
super(uploadPanel, pluginConfig, validator);
createComponents();
}
@Override
public String getUploadScript() {
Map<String, Object> variables = new HashMap<>();
variables.put("componentMarkupId", fileUploadBar.getMarkupId());
return MapVariableInterpolator.interpolate(UPLOADING_SCRIPT_TEMPLATE, variables);
}
@Override
protected void onBeforeRender() {
// Obtain callback urls used for uploading files & notification
String uploadUrl = urlFor(ajaxFileUploadBehavior, IBehaviorListener.INTERFACE, new PageParameters()).toString();
settings.setUploadUrl(uploadUrl);
String uploadDoneNotificationUrl = ajaxCallbackDoneBehavior.getCallbackUrl().toString();
settings.setUploadDoneNotificationUrl(uploadDoneNotificationUrl);
super.onBeforeRender();
}
private void createComponents() {
add(ajaxFileUploadBehavior = new AjaxFileUploadBehavior(this) {
@Override
protected void process(final FileUpload fileUpload) throws FileUploadViolationException {
JQuerySingleFileUploadWidget.this.process(fileUpload);
}
@Override
protected void onAfterUpload(final FileItem file, final FileUploadInfo fileUploadInfo) {
JQuerySingleFileUploadWidget.this.onAfterUpload(file, fileUploadInfo);
}
protected void onUploadError(final FileUploadInfo fileUploadInfo) {
JQuerySingleFileUploadWidget.this.onUploadError(fileUploadInfo);
}
});
add(ajaxCallbackDoneBehavior = new AjaxCallbackUploadDoneBehavior(settings) {
@Override
protected void onNotify(final int numberOfUploadedFiles) {
if (numberOfUploadedFiles != 1) {
log.error("The widget '{}' should be used for uploading only a single file. Please use {} for multiple file uploads",
JQuerySingleFileUploadWidget.class.getName(), FileUploadWidget.class.getName());
}
}
});
fileUploadBar = new SingleFileUploadBar("fileUploadBar", settings) {
protected void onChange(final AjaxRequestTarget target) {
JQuerySingleFileUploadWidget.this.onChange(target);
}
};
add(fileUploadBar);
}
protected void onChange(final AjaxRequestTarget target) {}
}
<!DOCTYPE html>
<!--
Copyright 2015 Hippo B.V. (http://www.onehippo.com)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
<div class="fileupload-buttonbar">
<!-- The fileinput-button is used to style the file input field as button -->
<div class="fileinput-button">
<label>
<wicket:message key="select-file-label"/>
</label>
<button>
<wicket:message key="choose-file-label"/>
</button>
<input type="file" name="files[]">
<span id="selected-file" class="ellipsis"></span>
</div>
</div>
</wicket:panel>
</html>
/*
* Copyright 2015 Hippo B.V. (http://www.onehippo.com)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.hippoecm.frontend.plugins.jquery.upload.single;
import java.util.Map;
import org.apache.wicket.Component;
import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.event.Broadcast;
import org.apache.wicket.markup.head.CssHeaderItem;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.JavaScriptHeaderItem;
import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.request.resource.CssResourceReference;
import org.apache.wicket.request.resource.JavaScriptResourceReference;
import org.apache.wicket.util.template.PackageTextTemplate;
import org.hippoecm.frontend.plugins.jquery.upload.FileUploadBehavior;
import org.hippoecm.frontend.plugins.jquery.upload.FileUploadWidgetSettings;
import org.hippoecm.frontend.widgets.UpdateFeedbackInfo;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
/**
* Create an unique instance of jquery-file-upload widget. It does not work for multiple instances jquery-file-upload
*/
public class SingleFileUploadBar extends Panel {
private static final long serialVersionUID = 1L;
static private final Logger log = LoggerFactory.getLogger(SingleFileUploadBar.class);
private static final CssResourceReference CSS = new CssResourceReference(SingleFileUploadBar.class, "SingleFileUploadBar.css");;
private static final String JQUERY_FILEUPLOAD_SINGLE_JS = "jquery.fileupload-single.js";
private static final String CONFIG_JS = "widget-config.js";
public SingleFileUploadBar(final String id, final FileUploadWidgetSettings settings) {
super(id);
setOutputMarkupId(true);
AbstractDefaultAjaxBehavior refreshAjaxBehavior;
add(refreshAjaxBehavior = new AbstractDefaultAjaxBehavior() {
@Override
protected void respond(final AjaxRequestTarget target) {
log.debug("Received an ajax callback refreshing page");
target.add(SingleFileUploadBar.this.getPage());
// refresh feedback panel in EditPerspective if needed
send(SingleFileUploadBar.this, Broadcast.BUBBLE, new UpdateFeedbackInfo(target));
}
});
final AbstractDefaultAjaxBehavior onChangeAjaxBehavior;
add(onChangeAjaxBehavior = new AbstractDefaultAjaxBehavior() {
@Override
protected void respond(final AjaxRequestTarget target) {
onChange(target);
}
});
add(new FileUploadBehavior(settings) {
@Override
protected void renderScripts(final IHeaderResponse response) {
super.renderScripts(response);
response.render(JavaScriptHeaderItem.forReference(
new JavaScriptResourceReference(SingleFileUploadBar.class, JQUERY_FILEUPLOAD_SINGLE_JS)));
}
@Override
protected Map<String, Object> configureParameters(final Component component) {
final Map<String, Object> variables = super.configureParameters(component);
//the script to refresh page after sending file has been done
variables.put("callbackRefreshScript", refreshAjaxBehavior.getCallbackScript());
variables.put("callbackFileOnChangeScript", onChangeAjaxBehavior.getCallbackScript());
onConfigureParameters(variables);
return variables;
}
@Override
protected void renderWidgetConfig(final IHeaderResponse response, final Map<String, Object> variables) {
PackageTextTemplate jsTmpl = new PackageTextTemplate(SingleFileUploadBar.class, CONFIG_JS);
String s = jsTmpl.asString(variables);
// call the configuration after all DOM elements are loaded
response.render(OnDomReadyHeaderItem.forScript(s));
}
});
}
/**
* This event is called when selecting a new file
* @param target
*/
protected void onChange(final AjaxRequestTarget target) {
}
/**
* Override this method to insert more variables to the widget configuration
*
* @param variables
*/
protected void onConfigureParameters(final Map<String, Object> variables) {
}
@Override
public void renderHead(IHeaderResponse response) {
response.render(CssHeaderItem.forReference(CSS));
}
}
#
# Copyright 2015 Hippo B.V. (http://www.onehippo.com)
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
select-file-label=Select file to upload
choose-file-label=Choose File
\ No newline at end of file
#
# Copyright 2015 Hippo B.V. (http://www.onehippo.com)
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
select-file-label=W\u00E4hlen Sie eine Datei zum hochladen
#
# Copyright 2015 Hippo B.V. (http://www.onehippo.com)
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
#
# Copyright 2015 Hippo B.V. (http://www.onehippo.com)
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
select-file-label=Selecteer bestand
choose-file-label=Kies Bestand
\ No newline at end of file
.fileupload-buttonbar .fileinput-button {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center;
flex-wrap: nowrap;
}
.fileupload-buttonbar .fileinput-button * {
padding: 0 0.5em;
flex-grow: 0;
display: inline-table;
}
.fileupload-buttonbar .fileinput-button input {
width: 100%;
height: 100%;
padding: 0;
}
#selected-file.ellipsis {
max-width: 500px;
padding-left: 0.5em;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
\ No newline at end of file
......@@ -36,7 +36,6 @@
$.blueimp.fileupload.prototype.options.processQueue = [];
$.widget('blueimp.fileupload', $.blueimp.fileupload, {
getFilesFromResponse: function (data) {
if (data.result && $.isArray(data.result.files)) {
return data.result.files;
......@@ -44,10 +43,8 @@
return [];
},
// Call to upload the selected file
uploadFile: function () {
if (this.uploaddata && this.uploaddata.submit) {
// console.log("uploading file");
this.uploaddata.submit();
}
}
......
......@@ -19,7 +19,6 @@
(function () {
'use strict';
console.log("Init jquery-fileupload widget '${componentMarkupId}'");
$('#${componentMarkupId}').fileupload({
autoUpload: ${autoUpload},
......@@ -46,19 +45,20 @@
}
}).bind('fileuploadadd', function (e, data) {
var widget = $('#${componentMarkupId}').data("blueimp-fileupload");
if (data && data.files && data.files.length > 0) {
showSelectedFile(data.files[0].name);
enableUploadButton();
// store selected file
widget.uploaddata = data;
// notify server on file-change event
${callbackFileOnChangeScript}
}
// store selected file
widget.uploaddata = data;
}).bind('fileuploadsubmit', function (e, data) {
var widget = $('#${componentMarkupId}').data("blueimp-fileupload");
// remove stored file that has been uploaded
this.uploaddata = null;
widget.uploaddata = null;
clearSelectedFile();
disableUploadButton();
});
})();
......@@ -71,12 +71,4 @@ function showSelectedFile (filename) {
*/
function clearSelectedFile () {
$('#${componentMarkupId}').find('#selected-file').text('');
}
function enableUploadButton () {
$('.upload-wrapper .upload-button').prop('disabled', false);
}
function disableUploadButton () {
$('.upload-wrapper .upload-button').prop('disabled', true);
}
\ No newline at end of file
/*
* Copyright 2010-2015 Hippo B.V. (http://www.onehippo.com)
*
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*
* http://www.apache.org/licenses/LICENSE-2.0
*
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
......@@ -18,6 +18,14 @@
border: 1px solid #eee;
}
.upload-wrapper .uploadpanel, .upload-button {
display:inline-block;
}
.upload-wrapper .uploadpanel {
flex-shrink: 1;
}
.upload-wrapper .browse-button {
font-size: 12px;
padding: 2px;
......
<!--
* Copyright 2007-2013 Hippo B.V. (http://www.onehippo.com)
* Copyright 2007-2015 Hippo B.V. (http://www.onehippo.com)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
......@@ -14,41 +14,41 @@
* limitations under the License.
-->
<html xmlns:wicket="http://wicket.apache.org/">
<wicket:panel>
<wicket:panel>
<wicket:extend>
<form wicket:id="uploadForm">
<div class="upload-wrapper">
<label for="upload">
<wicket:message key="select-file-label"/>
</label>
<input wicket:id="uploadField" size="60" id="upload" type="file" class="browse-button"/>
<span wicket:id="uploadTypeSelector"><select wicket:id="galleryType">[ ImageSet dropdown ]</select></span>
<input wicket:id="uploadButton" type="submit" value="Upload" class="upload-button"/>
</div>
</form>
<div wicket:id="content">[content]</div>
<form wicket:id="uploadForm">
<div class="upload-wrapper">
<!--Begin of jquery file upload widget-->
<div wicket:id="uploadPanel" class="uploadpanel"></div>
<span wicket:id="uploadTypeSelector"><select wicket:id="galleryType">[ ImageSet dropdown ]</select></span>
<input wicket:id="uploadButton" type="button" class="upload-button"/>
<!--End of jquery file upload widget-->
</div>
</form>
<div wicket:id="content">[content]</div>
<div class="hippo-picker-properties ">
<div class="hippo-dialog-align">
<label>
<wicket:message key="align-label">Align:</wicket:message>
</label>
<select wicket:id="align">[ Align dropdown ]</select>
</div>
<div class="hippo-dialog-type">
<label>
<wicket:message key="type-label">Type:</wicket:message>
</label>
<select wicket:id="type">[ type dropdown ]</select>
</div>
<div class="hippo-dialog-alt">
<label>
<wicket:message key="alt-text-label">Alternative text:</wicket:message>
</label>
<div wicket:id="alt" class="text-input">[Alt text box]</div>
</div>
<div class="hippo-picker-properties ">
<div class="hippo-dialog-align">
<label>
<wicket:message key="align-label">Align:</wicket:message>
</label>
<select wicket:id="align">[ Align dropdown ]</select>
</div>
<div class="hippo-dialog-type">
<label>
<wicket:message key="type-label">Type:</wicket:message>
</label>
<select wicket:id="type">[ type dropdown ]</select>
</div>
<div class="hippo-dialog-alt">
<label>
<wicket:message key="alt-text-label">Alternative text:</wicket:message>
</label>
<div wicket:id="alt" class="text-input">[Alt text box]</div>
</div>
</div>
</wicket:extend>
</wicket:panel>
</wicket:panel>
</html>
\ No newline at end of file
......@@ -11,5 +11,7 @@ bottom=Bottom
left=Left
right=Right
button-upload-label=Upload
exception,type\=org.hippoecm.repository.api.WorkflowException=Cannot add '{0}', because an item with name {0} already exists in this folder.
exception,type\=org.hippoecm.frontend.plugins.jquery.upload.FileUploadViolationException=Cannot add '{0}': {1}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment