Raible's Wiki: CreateAnAJAXBasedFileuploadProgressbarDialog

At line 3 changed 2 lines.

!!!How to Create an AJAX based file upload progress-bar dialog

This HOWTO shows how i combined [AJAX Struts File Upload Progress Meter|http://kencochrane.blogspot.com/2006/03/ajax-struts-file-upload-progress-meter.html] with a custom tweaked version of [Lightbox Gone Wild!|http://particletree.com/features/lightbox-gone-wild/] to create a user friendly upload progress bar dialog with the web page below faded out. This means that users are unable to click on any links on the website and shows a the visual indication of how much is left of the file transfer. Its easy to customize the content of the dialog.

!!!How to Create an AJAX based file upload progress-bar

This tutorial shows how [AJAX Struts File Upload Progress Meter|http://kencochrane.blogspot.com/2006/03/ajax-struts-file-upload-progress-meter.html] has been combined with a custom tweaked version of [Lightbox Gone Wild!|http://particletree.com/features/lightbox-gone-wild/] to create a user friendly upload progress bar dialog with the web page below faded out. This means that users are unable to click on any links on the website and shows a the visual indication of how much is left of the file transfer. Its easy to customize the content of the dialog (see __{{lbContent}}__ in the section __Comments and tips__ section).

At line 9 changed 1 line.

For newcomers to appfuse see [QuickStart Guide]

For newcomers to appfuse see [AppFuseQuickStart] as well as the videos at the top of the page [AppFuse]

At line 157 added 1 line.

!Notes for usage on previous Appfuse Versions

At line 159 added 29 lines.

This tutorial can also work on previous versions of Appfuse but you need to include the dependend AJAX framewords (they are by default included in Appfuse 1.9.3). You can grap prototype and scriptaculous from Appfuse 1.9.3 and place the scrips in the same folders as where they are placed in Appfuse 1.9.3. You also need to reference the Ajax frameworks in the decorator default.jsp. Below is an excerpt of the begining of {{default.jsp}} from the Appfuse 1.9.3 project used as basis for this tutorial. You specifically needs the lines that references "prototype.js" and "scriptaculous.js" in that order since "scriptaculous.js" depends on "prototype.js". __It's important to note__ that scriptaculous.js may load additionally js scrips. And this solution in thus tutorial also needs the effects.js to be available. But in order to be safe you should include them all. They are:

*builder.js

*effects.js

*dragdrop.js

*controls.js

*slider.js

__Excerpt of the beginning of default.jsp__

{{{

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ include file="/common/taglibs.jsp"%>

<head>

<%@ include file="/common/meta.jsp" %>

<decorator:head/>

</head>

...

}}}

At line 272 changed 9 lines.

*Central files in this solution

##__{{FileUploadAction.java}}__ - the struts Action responsible for reciving the uploaded files and save them to disk

##__{{lightboxDwrUpload.js}}__ - The modified [Lightbox Gone Wild!|http://particletree.com/features/lightbox-gone-wild/] script used to fade the contend outside the upload dialog. This script looks copies the .innerHtml() from the div tag with id {{lbContent}} to the dialog. See next bullet.

##__{{fileUploadForm.jsp}}__ and lbContent - the jsp page containing the struts form. It contains a {{lbContent}} div tag which represent the html code inserted in the upload dialog. It also contains an embedded javascript with the function {{function upload(form)}} This script only trigger the upload mechanism if one or more files has been selected.

##__{{dwrUpload.js}}__ - This script is the Ajax functions that updates the content of the upload dialog. You can tweak the dialog refresh rate here.

##__{{ExtendedMultiPartRequestHandler.java}}__ - a slightly changed Struts controller (change marked by "Changed this section of code, that is it."). There is one important line here {{{UploadListener listener = new UploadListener(request, 1);}}} The '1' here means delay to 1 millisecond. By increasing this value uploads will take longer time but will also be less CPU intensive.

##__{{engine.jsp}}__ - is actually engine.js extracted from dwr1.x and tweaked to ensure dwr also works with cookies disabled. For details see "Support for DWR without cookies" [http://getahead.ltd.uk/dwr/fixes]. This issue is solved in version 2 of dwr.

##__{{lightboxDwrUpload.css}}__ - Here the opacity can be specified.

##__{{dwrUpload.css}}__ - Here the progress bar can be styled.

__Central files in this solution__

At line 282 changed 2 lines.

!Change log4j to see whats going on.

In the file log4j.properties change the line {{{log4j.rootCategory=DEBUG, mail}}} to {{{log4j.rootCategory=DEBUG, R}}} to get the log log messages written into a log file.

#__{{FileUploadAction.java}}__ - the struts Action responsible for reciving the uploaded files and save them to disk

#__{{lightboxDwrUpload.js}}__ - The modified [Lightbox Gone Wild!|http://particletree.com/features/lightbox-gone-wild/] script used to fade the contend outside the upload dialog. This script looks copies the __{{.innerHtml()}}__ from the div tag with id __{{lbContent}}__ to the dialog. See next bullet.

#__{{fileUploadForm.jsp}}__ and __{{lbContent}}__ - the JSP page containing the struts form. It contains a __{{lbContent}}__ div tag which represent the html code inserted in the upload dialog. It also contains an embedded javascript with the function __{{function upload(form)}}__ This script only trigger the upload mechanism if one or more files has been selected.

#__{{dwrUpload.js}}__ - This script is the Ajax functions that updates the content of the upload dialog. You can tweak the dialog refresh rate here.

#__{{ExtendedMultiPartRequestHandler.java}}__ - a slightly changed Struts controller (change marked by "Changed this section of code, that is it."). There is one important line here __{{{UploadListener listener = new UploadListener(request, 1);}}}__ The '1' here means delay to 1 millisecond. By increasing this value uploads will take longer time but will also be less CPU intensive.

#__{{engine.jsp}}__ - is actually engine.js extracted from dwr1.x and tweaked to ensure dwr also works with cookies disabled. For details see "Support for DWR without cookies" [http://getahead.ltd.uk/dwr/fixes]. This issue is solved in version 2 of dwr.

#__{{lightboxDwrUpload.css}}__ - Here the opacity can be specified.

#__{{dwrUpload.css}}__ - Here the progress bar can be styled.

At line 313 added 1 line.

__Change log4j to see whats going on__

At line 286 changed 1 line.

!Additional thoughts

In the file __{{log4j.properties}}__ change the line {{{log4j.rootCategory=DEBUG, mail}}} to {{{log4j.rootCategory=DEBUG, R}}} to get the log log messages written into a log file.

__Additional thoughts__

At line 289 changed 1 line.

!Productivity

__Productivity__

At line 292 changed 1 line.

!Related articles

__Related articles__

At line 296 changed 1 line.

!Final note

__Final note__

Raible's Wiki

AppFuse

Other Applications

CreateAnAJAXBasedFileuploadProgressbarDialog