The trick is based on a hidden iframe, like the following:
<iframe id="upload_target" wicket:id="upload_target" name="upload_target"
style="width:0px;height:0px;border:0" ></iframe>
<form wicket:id="form0" target="upload_target" >
<div id="upload-field-handler" style="position: absolute; z-index: 100;
display: none">
<input id="upload_field" wicket:id="upload_field" type="file"
class="DisplayText" size="55" onchange="upload(this)" />
</div>
</form>
And tell wicket to do not redirect on form upload when the submit is
terminated:
public void onSubmit() {
getRequestCycle().setRedirect(false);
getRequestCycle().setRequestTarget(EmptyRequestTarget.getInstance());
}
I'm attaching my code so you can check details.
Have fun
-- Paolo
On Wed, Jul 9, 2008 at 4:35 PM, Arun Wagle <[EMAIL PROTECTED]> wrote:
> Hello All,
>
> I have an issue with the file upload
> I have a Fileupload input filed on a tabbed panel. The first time when I
> select a file and submit, the following returns null
> FileUpload upload = fileUploadField.getFileUpload(); return null.
> But if I select the same file again and submit I get the value. Have anyone
> encountered this before ?
>
> If this can be of any help, the TabbedPanel link is a AJAXSubmit as I need
> to retain some of the form values on tab change .
> Also the above action occurs on the submit of another "File Upload" button
> on the form and not on the Tabbed link Submit
>
> Also is there a AJAX Fileupload component anyone know of or has written? .
>
> Thank you all in advance
>
> Regards,
> Arun Wagle
>
package org.fao.ocd.applications.coin.web.ui.widget;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.fao.ocd.applications.coin.web.wicket.AjaxUtils;
import org.apache.wicket.ajax.AjaxEventBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.IAjaxCallDecorator;
import org.apache.wicket.ajax.calldecorator.AjaxCallDecorator;
import org.apache.wicket.feedback.FeedbackMessage;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.upload.FileUpload;
import org.apache.wicket.markup.html.form.upload.FileUploadField;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.request.target.basic.EmptyRequestTarget;
import org.apache.wicket.util.lang.Bytes;
/**
* A specialized Panel aimed at file uploading management.
*
* <p>The components to render the attachments list should look like this:<br/>
* <code>
* <div wicket:id="attachment_container" ><br/>
* <table id="attach-table"><br/>
* <tr wicket:id="attachments" ><br/>
* <td class="menuListItem"><img wicket:id="clip" height="15" width="15" /> </td><br/>
* <td class="menuListItem"><a wicket:id="link" ><span wicket:id="filename" >filename (size)</span></a></td><br/>
* <td class="menuListItem"><a wicket:id="delete" >delete</a></td><br/>
* </tr><br/>
* </table><br/>
* </div><br/>
* <div id="upload-field-position" class="menuListItem" style="height: 22px" ><br/>
* <a id="attach-link" href="javascript:void(0)" onclick="showUploadField();" >Attach a file</a><br/></div> <br/>
* </code>
* </p>
* <p>
* There are a few naming contraints you need to follow to make it work, due to the fact that some components' names are explicitly referenced in the Javascript code
* contained in UploadPanel.html:<br/>
* 1) the last DIV in the code above must have id="upload-field-position";<br/>
* 2) the anchor inside it must have id="attach-link" and onclick="showUploadField();".
* </p>
*
* @author Fabio Fioretti
*
*/
public class UploadPanel extends Panel{
private static final Log log = LogFactory.getLog(UploadPanel.class);
private UploadForm uploadForm;
public UploadPanel(String id) {
super(id);
// the hidden frame
createUploadTargetFrame(this);
/*
* The uploading form
*/
add( uploadForm = new UploadForm("form0") );
}
public UploadPanel(String id, int sizeMB) {
super(id);
// the hidden frame
createUploadTargetFrame(this);
/*
* The uploading form
*/
add( uploadForm = new UploadForm("form0", sizeMB) );
}
private WebMarkupContainer createUploadTargetFrame(Panel container) {
WebMarkupContainer frame = new WebMarkupContainer("upload_target");
frame.add( new AjaxEventBehavior("onload") {
protected IAjaxCallDecorator getAjaxCallDecorator() {
return new AjaxCallDecorator() {
public CharSequence decorateScript( CharSequence script ) {
return " if(__cload++>0) { "+script+" } ";
}
};
}
protected void onEvent(AjaxRequestTarget target) {
try {
if( uploadForm.error != null ) {
AjaxUtils.alert(target, String.valueOf(uploadForm.error.getMessage()) );
// on error we will reload the form
target.addComponent( uploadForm );
// clear raising error
uploadForm.error = null;
}
else {
// on hidden frame reload we will refresh the attachments list
target.addComponent( uploadForm );
onUploadCompleted(target);
}
}
finally {
target.appendJavascript( "uploadCompleted()" );
}
}
} );
container.add(frame);
return frame;
}
/**
* This class handles file uploading
*/
private class UploadForm extends Form {
private FeedbackMessage error;
private FileUploadField fileUploadField;
public UploadForm(String id) {
super(id);
// set this form to multipart mode (allways needed for uploads!)
setMultiPart(true);
// Set maximum size to 2 MB
setMaxSize(Bytes.megabytes(2));
/*
* File upload field
*/
fileUploadField = new FileUploadField("upload_field");
add( fileUploadField );
}
public UploadForm(String id, int sizeMB) {
super(id);
// set this form to multipart mode (allways needed for uploads!)
setMultiPart(true);
// Set maximum size to sizeMB MB
setMaxSize(Bytes.megabytes(sizeMB));
/*
* File upload field
*/
fileUploadField = new FileUploadField("upload_field");
add( fileUploadField );
}
protected void onSubmit() {
// clear previous error
error = null;
/*
* save the uploaded file
*/
FileUpload upload = fileUploadField.getFileUpload();
if( upload != null ) {
if( log.isDebugEnabled() ) {
log.debug("Attaching file name: '" + upload.getClientFileName() + "', type: '" + upload.getContentType() + "', size: " + upload.getSize() );
}
onUpload(upload);
}
else {
log.warn("Nothing uploaded");
}
// To avoid redirection:
// 1/2 - Tell Wicket we're going to do the redirect ourselves.
getRequestCycle().setRedirect(false);
// 2/2 - Make sure no output for the current cycle is ever sent.
getRequestCycle().setRequestTarget(EmptyRequestTarget.getInstance());
}
protected void onError(){
error = uploadForm.getFeedbackMessage();
// To avoid redirection:
// 1/2 - Tell Wicket we're going to do the redirect ourselves.
getRequestCycle().setRedirect(false);
// 2/2 - Make sure no output for the current cycle is ever sent.
getRequestCycle().setRequestTarget(EmptyRequestTarget.getInstance());
}
}
/**
* Override this method to instantiate a specialized attachment object starting from the <code>upload</code> [EMAIL PROTECTED] FileUpload} instance.
* <p>
* Example:<br/>
* <code>
* public void onUpload(FileUpload upload){<br/>
* Attachment attach = new Attachment();<br/>
* attach.setName(upload.getClientFileName());<br/>
* attach.setMimeType(upload.getContentType());<br/>
* attach.setContent(upload.getBytes());<br/>
* }
* </code></p>
*
* @param upload The [EMAIL PROTECTED] FileUpload} instance, i.e. the uploaded file.
*/
public void onUpload(FileUpload upload) {
}
/**
* Override this method to refresh components related to the file upload functionality (for example, to refresh the attachments list).
* <p>
* Example:<br/>
* <code>
* public void onUploadCompleted(AjaxRequestTarget target){<br/>
* target.addComponent( attachments );<br/>
* }
* </code></p>
*
* @param target
*/
protected void onUploadCompleted(AjaxRequestTarget target) {
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
