Details
-
Type:
New Feature
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: 2.0-Beta2
-
Component/s: ACE-Components
-
Labels:None
-
Environment:ACE
-
Assignee Priority:P2
-
Affects:Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial
Description
When adding HTML 5 multiple file selection support, simply add the blocks of selections into the same table of selections.
Activity
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
Added multiple file upload user interface, first draft. Art will augment and polish. When new "multiple" property is true, then a tabular display is used, with a button bar for selecting files to upload, and initiating the upload. When files are selected, table rows are added to show information on the selected file(s), such as the file name. In an html5 browser with FileList support, the file size and content type are also shown. There is a Cancel button in the rows corresponding to the file selections, to remove those but keep other file selections intact.
Testing should involve the combinations of multiple, autoUpload, with various sequences of selecting and cancelling selections, then using the new built-in upload button versus an extra h:commandButton, all in various browsers. This was developed in Chrome and lightly tested elsewhere. In particular IE 9 and before will not support multiple selection in a single file selection dialog, but should allow for multiple invocations of the "Add files" button to still select multiple files progressively and upload them all together. IE 10 and above should work the same as Firefox, Chrome and Safari to allow multiple selection within a single invocation of "Add files", but those still support multiple invocations as well.
icefaces3 trunk
Subversion 37715
Improved the ace:fileEntry Overview sample in showcase to better demonstrate the new multiple upload functionality. It now uses a table to show all of the files that have cumulatively been uploaded.
icefaces3 trunk
Subversion 37716
Found in icefaces3 trunk revision# 37740, fileEntry > Overview has alignment issue in FF and IE:
Alignment issue- when viewed in FF21 or IE 9 the "Add files" button is not aligned with the "Start upload" or "Cancel Upload" buttons. In Chrome all three buttons are horizontally aligned. (see screen shot fileEntryAlign.png)
To reproduce:
Deploy showcase.war on Tomcat 7
Navigate to showcase > fileEntry > Overview in FF or IE, no interaction is required.
Manual tests fail when attempting to upload files.
Reported in revision 37740 August 30 ACE Regression Tests.
All tests fail manually: after uploading files, no information is displayed below 'Upload results', and the files cannot be found on the server.
There is also an error in browser error console (all browsers):
Firefox23:
"NetworkError: 500 Internal Server Error - http://10.18.39.146:8080/fileEntry/fileEntryTable.jsf?ice.fileEntry.multipart=true"
fileEn...rt=true
Chrome:
POST http://localhost:8080/fileEntry/fileEntryTable.jsf;jsessionid=770A4920876A63161A843CA5838C848C?ice.fileEntry.multipart=true 500 (Internal Server Error) fileEntryTable.jsf;jsessionid=770A4920876A63161A843CA5838C848C?ice.fileEntry.multipart=true:1
Uncaught TypeError: Cannot read property 'firstChild' of undefined jsf.js.jsf?ln=javax.faces&v=3_4_0_130829:1
Committed the following changes at revision 37794:
- Added ACE resource bundle entries for localising the buttons' text.
- Renamed the CSS classes of the buttons to better integrate with the existing fileentry naming pattern.
- Fixed issue in FF and IE with button misalignment.
- Modified component to avoid displaying the buttons in the no script case, allowing the native input type=file element to be displayed.
- Renamed the 'cancel upload, reset form' button to simply 'cancel upload' and made it a button type=button, instead of a button type=reset, and added a call to the clearFileSelection() function.
This takes care of the outstanding issues described by Mark above and of the TODO items in the source code. As for the last point, I decided to change the label of the cancel/reset button as 'cancel upload' and not make it a 'reset' button for the following reasons:
- A 'reset' button clears the whole form, not only the input type=file fields.
- A call to clearFileSelection() was added to this button, so it cleanly removes all input type=file fields, without resetting the form.
- In the no script case these buttons aren't displayed, and the input type=file field can be cleared by simply clicking again on the native button to choose files and clicking cancel.
The only outstanding issue at the moment is that in the table that lists the files to be uploaded there is only one cancel button for all files, instead of one cancel button per file. Somehow, these changes affected that.
As for Liana's last comment, I couldn't reproduce the issue exactly as described. I've been able to successfully upload files. However, after doing so, I get an exception in the server and a "Network Connection Interrupted" message in the browser. I did some investigation, and this problem started at revision 37788 with a commit in ice push with the message "Fixed JIRA PUSH-274 : Pass the Browser-ID down the chain to the BlockingConnectionServer's constructor".
The issue I mentioned regarding the table is actually not an issue; that's the way things work. There's a 'cancel' button on the table for every group of files that was added at the same time after clicking the 'Add files' button. So, for example, if the 'Add files' button is clicked three different times, and at each time only one file is selected, then each file in the table would have its own 'cancel' button. On the other hand, if the 'Add files' button is clicked only once, and three files are selected at the same time. Then, there would be only one 'cancel' button to remove those three files together.
There doesn't seem to be a way to clear individual entries from the FileList that is the files attribute on the input type=file element. And our use of the iframe submit requires that we use the element within the form as we submit the whole form. But, with ICE-9526, there might be a scenario we can detect where we can do send(File) manually [just like when uploading drag and drop files] and not submit the FileList, and then we can put Cancel buttons for each individual file.
Icefaces3 revision# 37825. Alignment issue is resolved but other issues persist. In Firefox the first time you press start upload there are 2 entries displayed describing the upload. All browsers - after uploading you can not select "Add files". The button looks press-able but no action occurs after pressing it.
Other issues found in showcase -> fileEntry demos:
1. After selecting a file, clicking multiple times 'Start upload' will render the uploaded file multiple times under 'Files on Server'.
2. The 'Cancel Upload' button is redundant and non-functional; as example, adding a file, then pressing 'Cancel upload' will still upload the file (trunk rev# 37843).
Closing JIRA.
Committed fixes to trunk for the four issues reported above at revision 38258: submitting the last selected file twice in FF; 'Add files' button not working after uploading files; 'Cancel upload' not correctly clearing the input type=file elements; and, re-uploading files every time 'Start upload' was clicked.
The push issue is also fixed with another commit by Jack for PUSH-274.
Confirmed fixed Icefaces 3 trunk revision 38258, FF21, IE9, Chrome 29.
In IE 8 and 7 a script popup now occurs: see screen shot IE8FileEntry.PNG
Line 5919
Unknown runtime error.
No issues seen in IE 9 or 10.
Fixed javascript errors in IE7 and IE8 at revision 38295.
The errors were caused by IE not supporting "innerHTML = '';". Changed approach to work with DOM methods to add and remove nodes. Also fixed other fixed table issues I found on IE7: not rendering the file list, not removing a cancelled file from list, and not removing the entire table.
Some interesting facts about IE7:
http://stackoverflow.com/questions/12613617/innerhtml-not-working-on-table-row-element-on-ie7
http://stackoverflow.com/questions/812693/cant-dynamically-add-rows-to-a-table-in-ie
http://stackoverflow.com/questions/17486889/internet-explorer-7-onclick-event-on-submit-button-does-not-fire
http://stackoverflow.com/questions/95731/why-does-an-onclick-property-set-with-setattribute-fail-to-work-in-ie
Testing notes: please re-test all browsers, since some general changes were made to fix these issues.
Tentatively scheduled for 3.4.