OverviewSince 2.0 The ace:fileEntry components allows end users to upload files to the server, for processing and storage by the application. It uses a special AJAX technique for allowing ICEfaces incremental page updates within HTML 4 compliant browsers. Files and other form elements are all uploaded and processed together in a single JSF lifecycle. Upload progress is shown by fileEntry itself, in the browser, with no need for application involvement or server coding. An indeterminate progress bar will be shown initially, and if ICEpush is enabled in the application, then an incrementing progress bar will be shown, when progress notifications are received.
Getting Started
<html ... xmlns:ace="http://www.icefaces.org/icefaces/components"> ...... <ace:fileEntry id="fileEntryComp" label="File Entry" relativePath="uploaded" fileEntryListener="#{fileEntryController.listener}"/> Attributes
results contains the results of the most recent file upload operation. If the form was submitted, and no files were selected, than the previous results would remain. The results are an instance of FileEntryResults, which encapsulates a list of FileInfo objects, each corresponding to an individual file that was attempted to be uploaded in the one form submit. fileEntryListener is the mechanism by which application are notified that a file upload attempt has been made. Files may have failed uploading, due to restrictions set on uploads, or they may have succeeded. For both cases, the attempt triggers this listener. This is an example of a prototypical fileEntryListener: import org.icefaces.ace.component.fileentry.*; public void listener(FileEntryEvent event) { FileEntry fileEntry = (FileEntry) event.getSource(); FileEntryResults results = fileEntry.getResults(); for (FileEntryResults.FileInfo fileInfo : results.getFiles()) { if (fileInfo.isSaved()) { // Process the file. Only save cloned copies of results or fileInfo } } } callback is the means of specifying a FileEntryCallback, which assumes control of receiving the uploaded file data, supplanting the built-in file-system saving mechanism. This is intended for scenarios where files should be processed in memory, written directly to a database, or over a socket. Any instance where writing the files to the file-system are undesirable. There is a tutorial, providing a code example.
immediate controls when in the JSF lifecycle the fileEntryListener will get invoked:
Default is "false". immediateValidation controls when in the JSF lifecycle the maxTotalSize, maxFileSize, maxFileCount and required validation will occur, marking the form as invalid and calling renderResponse, if necessary.
Default is "true". absolutePath, relativePath, useSessionSubdir and useOriginalFilename together determine where the uploaded files will be stored on the server's file-system. absolutePath, or alternatively relativePath, determine the root directory into which files will be stored. If absolutePath is specified, then it is interpreted as an absolute path into the file-system. As well, it takes precedence if relativePath is also specified, erroneously. If relativePath is specified, it is interpreted as a path within the application deployment directory. The default is for, the root in which files are saved, to be the application deployment directory. useSessionSubdir and useOriginalFilename are used to keep different files, from different users, from colliding with each other, in the save root. When useSessionSubdir="false", files uploaded from different sessions will all be jumbled together. The default, of useSessionSubdir="true", separated files of different sessions, each user's file remain separate, and each time a given user logs back in, their files are kept separate from their previous logins' files. This simplified application processing and cleanup of each session's files. When useOriginalFilename="true", files are saved on the server's file-system using their file name from the user's file-system. This might simplify processing, but could also be a security risk. As well, collisions may occur, where if different versions of the same file are uploaded over time, or different files from different directories, but which share the same file name, are uploaded, then the last one uploaded will overwrite earlier uploaded ones. The default, of useOriginalFilename="false", saves the uploaded files onto the server's file-system using uniquely generated file names. maxTotalSize, maxFileSize and maxFileCount allow for setting quota constraints on upload operations. They are evaluated and enforced for each individual form submit and upload. Subsequent form submit and uploads do not take into account previous ones.There are no default values, as there are no default constraints. If any of these constraints are not met, then the form will be marked invalid, UpdateModel and InvokeApplication phases will not run, and none of the form fields will be set into the application's beans. When a fileEntry component is configured to allow uploading of multiple files in a single form submit, maxTotalSize and maxFileCount become more relevant.
required is used to specify that at least one file must be uploaded as part of the current form submit, for the form to be valid. If no file was uploaded, then the form will be marked invalid, UpdateModel and InvokeApplication phases will not run, and none of the form fields will be set into the application's beans. The required property does not look into whether the uploaded files succeeded or not, just that any files were attempted to be uploaded. The other constraints, which can fail uploads, will themselves invalidate the form. The criteria for required to invalidate the form is:
ICEfaces 3.xThe client side component object is exposed through the global variable name specified in the widgetVar attribute. Since P06 The "multiple" attribute is now fully supported to enable the selection and upload of multiple files using a single ace:fileEntry component. ICEfaces 4+The "multiple" attribute is now fully supported to enable the selection and upload of multiple files using a single ace:fileEntry component. The "widgetVar" attribute on the ACE components has been removed in ICEfaces 4 and in its place a new "ice.ace.instance()" client JavaScript object lookup API has been introduced. The reason for this change is to enable lazy-initialization of the ACE component JavaScript objects to improve runtime performance and reduce browser memory use.
var widget = ice.ace.instance('frm:componentId);
Overriding Default Button LabelsIt is possible to override the ace:fileEntry button labels in the following way. Step 1. Create a properties file somewhere in your classpath. For example, in the ICEfaces Showcase app, create a file named 'fileEntryMessages.properties' in the 'org.icefaces.samples.showcase.view.resources' package. Step 2. Populate that file, defining values for the appropriate ace:fileEntry button labels keys. For example... org.icefaces.ace.component.fileEntry.ADD_FILES = Custom Add Files org.icefaces.ace.component.fileEntry.ADD_FILES_detail = Custom Add Files org.icefaces.ace.component.fileEntry.START_UPLOAD = Custom Start Upload org.icefaces.ace.component.fileEntry.START_UPLOAD_detail = Custom Start Upload org.icefaces.ace.component.fileEntry.CANCEL_UPLOAD = Custom Cancel Upload org.icefaces.ace.component.fileEntry.CANCEL_UPLOAD_detail = Custom Cancel Upload It is advised to define the same value for the '_detail' keys when overriding the default values. Step 3. In your application's faces-config.xml file, add a <message-bundle> tag under the <application> tag, containing the package and name of your custom messages files (without including the '.properties' file extension). For our example above, this would look as follows: <application> <message-bundle> org.icefaces.samples.showcase.view.resources.fileEntryMessages </message-bundle> </application> ARIA supportThe following ARIA roles are supported: button (when in multiple mode). Additional NotesWhat to expect when some files fail validation in a multiple file upload? When you try to upload multiple files and some of them are rejected because of size, type or any other validation rule, you can expect that the files that passed validation will be saved in the server, and the file entry listener will fire, and you'll be able to see what files were successfully uploaded and which weren't by examining the FileEntryResults. CSS ClassesThe following markup represents the basic HTML structure of the component and the CSS classes it uses. <!-- Root container --> <div class="ice-file-entry [user defined classes]" style="[user defined styles]"> <div class="buttonbar"> <div class="buttons"> <!-- Add files button --> <span class="add-files ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"> <span class="ui-button-icon-primary ui-icon ui-icon-plusthick"></span> <span class="ui-button-text"> <span>Add files</span> </span> <input type="file"/> </span> <!-- Start upload button --> <button class="start ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="submit"> <span class="ui-button-icon-primary ui-icon ui-icon-circle-arrow-e"></span> <span class="ui-button-text">Start upload</span> </button> <!-- Cancel upload button --> <button class="cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="button"> <span class="ui-button-icon-primary ui-icon ui-icon-cancel"></span> <span class="ui-button-text">Cancel upload</span> </button> </div> </div> <!-- Progress bar --> <div class="inactive"> <div class="ui-progressbar ui-widget ui-widget-content ui-corner-all"> <div class="ui-progressbar-value ui-widget-header ui-corner-left ui-corner-right"></div> </div> </div> <!-- List of files to upload --> <div> <table class="multiple-select-table"></table> </div> <!-- Invalid type error dialog --> <div class="ice-ace-fileentry-invalid-type-dialog ui-widget ui-widget-content ui-corner-all ui-state-error"> <div> <span style="float:right" class="ui-corner-all"> <span class="ui-icon ui-icon-closethick">Close</span> </span> </div> <div>Invalid file type selected.</div> </div> </div> Known IssuesThe following known issues exist:
|
FileEntry
© Copyright 2021 ICEsoft Technologies Canada Corp.