File Chooser provides a way of choosing files from the desktop. The widget uses Prototype library and implements DWR (Direct Web Remoting) to get data.
Depends on
Location Chooser
- Select single/multiple files
- Dialog and inline mode
- Return selected value in the textfield
Add this code to the head section of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css" title="currentStyle" media="screen">
@import '<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>';
</style>
<script src='/dekohportal/dwr/engine.js'></script>
<script src='/dekohportal/dwr/util.js'></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","dialog","dialog.js")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","fileChooser","fileChooserDialog.js")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","locationChooser","locationchooser.js")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","fileChooser","filechooser.js")%>"></script>
<script src='/dekohportal/dwr/interface/locationchooser.js'>
</script>
The basic syntax to initialize the Dialog widget is
<script type="text/javascript">
function handleLocationChooserOnClose(gDialogId, returnValue, servletUrl)
{
alert('selected folder is '+returnValue);
}
</script>
<script type="text/javascript">
function openFilesDialog(){
new LC_Dialog('dialog_ID',{ returnTxtFieldId:'chosenFiles', fileSeperator:'\\', multiSelect:true });
}
</script>
Include the following code where you want to invoke the File Chooser in page:
<input type="text" size="30" id="chosenFiles" name="chosenFiles" value=""/>
<input type="button" value="Select Files" onclick="javascript:openFilesDialog();"/>
Embedding the File Chooser in the page
Add this code to the head section of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css" title="currentStyle" media="screen">
@import '<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>';
</style>
<script src='/dekohportal/dwr/engine.js'></script>
<script src='/dekohportal/dwr/util.js'></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request,"common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request,"widget","dialog","dialog.js")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request,"widget","fileChooser","fileChooserDialog.js")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request,"widget","fileChooser","filechooser.js")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request,"widget","locationChooser","locationchooser.js")%>"></script>
<script src='/dekohportal/dwr/interface/locationchooser.js'></script>
The basic syntax to initialize the Dialog widget is
<script type="text/javascript">
function showFileChooser(){
var strContent = '<div id="fileChooserDiv"></div>';
var oFileChooserDialog = new dekohDialog(gDialogId, {className:'greylighting',title:"Import",height:450,width:600,resizable:false,maximizable:false,minimizable:false,content:strContent});
new FileChooser('fileChooser',{targetDivId:'fileChooserDiv',mode:'select',returnTxtFieldId:'',trayObjRef:oFileChooserDialog,fileFilter:'photos',fileSeperator:'\\', multiSelect:true});
}
</script>
<script type="text/javascript">
function trayFileChooser(gDialogId, returnValue, servletUrl){
alert('selected folder is '+returnValue);
}
</script>
Include this code in the page:
<div id="fileChooserDiv"></div>
<input type="text" size="30" id="chosenFiles" name="chosenFiles" value=""/>
<input type="button" value="Show File Chooser" onclick="javascript:showFileChooser();"/>
| Options | Since | Description | Default |
|---|
| Id | V1.0 | Dialog Id | - |
| Options | Since | Description | Default |
|---|
| targetDivId | V1.0 | The target division Id where the file chooser is going to get loaded | null |
| mode | V1.0 | Start the dialog in ‘select’ or ‘save’ mode | 'select' |
| returnTxtFieldId | V1.0 | When the dialog is initialized in the select mode the values are returned to the text field element id | null |
| trayObjRef | V1.0 | The Object reference of the tray | null |
| fileFilter | V1.0 | Set the file name filter to show in the populated list | ‘*’ |
| fileExtensions | V1.0 | Set the filters of the file extensions which have to show in the list. Eg ‘.gif’,’.doc’ | ‘*.*’ |
| fileSeperator | V1.0 | This value is to be initialized for different operating systems | ‘
’ |
| multiSelect | V1.0 | Set the value as true or false for enabling multiple file selection | true | |
| Function | Parameters | Description |
|---|
| fillFilterOptions | - | - |
| createFileList | targetEle:Target Element to Render, fullTree:Current tree object,currentPath:Current clicked path | This creates file list from the selection |
| applyFileTypeFilter | - | - |
| applyFileNameFilter | - | - |
| setCurrentFile | - | - |
| selectFiles | - | - |
| Options | Since | Description | Default |
|---|
| Id | V1.0 | Dialog Id | - |
| Options | Since | Description | Default |
| className | V1.0 | The style class | Dekoh |
| returnTxtFieldId | V1.0 | When the dialog is initialized in the select mode the values are returned to the text field element id | |
| mode | V1.0 | Start the dialog in ‘select’ or ‘save’ mode | select |
| trayTopMessage | V1.0 | The message shown on the dialog | “Select file(s) to add/import” |
| fileSeperator | V1.0 | This value is to be initialized for different operating systems | “
” |
| multiSelect | V1.0 | Set the value as true or false for enabling multiple file selection | true |
| title | V1.0 | Set the title here | ‘File Chooser’ |
| width | V1.0 | Width of the dialog | 600 |
| height | V1.0 | Height of the dialog | 450 |
| xPos | V1.0 | Specify the x position of the dialog in the document | 0 |
| yPos | V1.0 | | |
| minimizable | V1.0 | | |
| maximizable | V1.0 | | |
| isModal | V1.0 | | |
Reference in web.xml
<init-param>
<param-name>config-locationChooser</param-name>
<param-value>widgets/locationChooser/dwr-locationchooser.xml</param-value>
</init-param>
<dwr>
<allow>
<create creator="new" javascript="locationchooser">
<param name="class" value="dekoh.dekohportal.widget.locationchooser.LocationChooserUtil"/>
<include method="getRootDirectories"/>
<include method="saveLocationBookMark"/>
<include method="saveFileBookMark"/>
<include method="getAllLocationBookMarks"/>
<include method="getAllFileBookMarks"/>
<include method="getLocationBookMark"/>
<include method="getFileBookMark"/>
<include method="getCurrentFolderTree"/>
</create>
<convert converter="bean" match="dekoh.dekohportal.widget.locationchooser.LocationObject"/>
<convert converter="bean" match="dekoh.dekohportal.widget.locationchooser.BookMarkObject"/>
</allow>
</dwr>
Each class on which we execute methods, needs a <create ...> entry. There are several types of creator. The most common ones use either the 'new' keyword or the Spring framework. For more information, see the Creator documentation.
| Method Name | Functionality |
|---|
| getRootDirectories | - |
| saveLocationBookMark | - |
| saveFileBookMark | - |
| getAllLocationBookMarks | - |
| getAllFileBookMarks | - |
| getLocationBookMark | - |
| getFileBookMark | - |
| getCurrentFolderTree | - |
We need to ensure that all the parameters can be converted. Many of the types provided by the JDK are enabled for you, but you need to give DWR permission to convert your own code. Generally this means that JavaBean parameters will need a <convert ...> entry.
Dekoh Portal Ver 0.4.2 or later.
