ICEfaces
  1. ICEfaces
  2. ICE-6204

ACE fileEntry multi-file upload

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.0-Beta2
    • Fix Version/s: 4.0.BETA, 4.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ACE
    • Assignee Priority:
      P2
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Instead of simply using an input type=file for file selection, display an editable table of selected files, each with their own progress bars, and file information. Each file selection may be deleted, and all may be deleted, before uploading. Maybe even find a way for the statuses to all show up for their respective file selection.

      When adding HTML 5 multiple file selection support, simply add the blocks of selections into the same table of selections.

        Activity

        Hide
        Ken Fyten added a comment -

        Tentatively scheduled for 3.4.

        Show
        Ken Fyten added a comment - Tentatively scheduled for 3.4.
        Hide
        Mark Collette added a comment -

        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

        Show
        Mark Collette added a comment - 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
        Hide
        Mark Collette added a comment -

        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

        Show
        Mark Collette added a comment - 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
        Hide
        Liana Munroe added a comment -

        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.

        Show
        Liana Munroe added a comment - 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.
        Hide
        Liana Munroe added a comment -

        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

        Show
        Liana Munroe added a comment - 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
        Hide
        Arturo Zambrano added a comment -

        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.

        Show
        Arturo Zambrano added a comment - 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.
        Hide
        Arturo Zambrano added a comment -

        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".

        Show
        Arturo Zambrano added a comment - 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".
        Hide
        Arturo Zambrano added a comment -

        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.

        Show
        Arturo Zambrano added a comment - 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.
        Hide
        Mark Collette added a comment -

        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.

        Show
        Mark Collette added a comment - 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.
        Hide
        Liana Munroe added a comment - - edited

        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.

        Show
        Liana Munroe added a comment - - edited 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.
        Hide
        Carmen Cristurean added a comment - - edited

        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).

        Show
        Carmen Cristurean added a comment - - edited 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).
        Hide
        Arturo Zambrano added a comment -

        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.

        Show
        Arturo Zambrano added a comment - 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 .
        Hide
        Liana Munroe added a comment -

        Confirmed fixed Icefaces 3 trunk revision 38258, FF21, IE9, Chrome 29.

        Show
        Liana Munroe added a comment - Confirmed fixed Icefaces 3 trunk revision 38258, FF21, IE9, Chrome 29.
        Hide
        Liana Munroe added a comment -

        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.

        Show
        Liana Munroe added a comment - 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.
        Hide
        Arturo Zambrano added a comment -

        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.

        Show
        Arturo Zambrano added a comment - 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.
        Hide
        Ken Fyten added a comment -

        Resolved.

        Show
        Ken Fyten added a comment - Resolved.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Mark Collette
          • Votes:
            3 Vote for this issue
            Watchers:
            7 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: