Our JSF 2.2 web application may have the situation, that users have to fill in a formular where they have to upload multiple files.
Example
First Name: [ John ]
Last Name: [ Doe ]
Photo: [ choose File ] (no file chosen)
Passport: [ choose File ] (no file chosen)
I know that there is multiple upload forms like Primefaces but this doesn't fit to my requirement, since I want to know which file is either the photo or passport, and I need to validate the input, because the files are mandatory.
Option 1: Multiple single file uploads
The first option would be like in the example above. Just use multiple single <h:inputFile> tags.
Pros:
- users select files when they are asked for
- users know this kind of file uploads
Cons:
- since there are more
<h:inputFile>tags, every file upload will be processed during the form submit: so we might have to limit filesizes so that users won't run into problems - I did not try this: is it even possible to use multiple single file uploads in the same
<h:form>?
Option 2: Upload in popup + callback
I have seen this sometimes and wondered why it was implemented that way. When you have to upload a file it opens a popup with a file upload. After the upload, the popup is closed and the form has selected the uploaded file.
Are there any hints/tutorials for this technique? Especially the between-window-communication is unclear for me.
Pros:
- nearly the same as the standard way
Cons:
- problems with popup-blockers
- for this approach, fallback mechanics have to be implemented: what if the user cancels the form? when are uploaded files deleted, so that there are no garbage files?
Option 3: Upload in modal dialog + callback
To eliminate the popup blocker problem we could use a modal dialog for an upload. So we choose to upload a file, a new modal <p:dialog modal="true"/> opens and there inside the <h:inputFile> handles your upload.
I did try this and found out that AJAX uploads are not possible with <h:inputFile> or <p:inputFile mode="simple"> (can't find the source of BalusC's comment, but there is a similar one). My whole site got rerendered and my formular input was lost.
Pros:
- nearly the same as the standard way
- no problems with popup blockers
Cons:
- even possible?
Option 4: "Upload Manager"
My last idea was to provide an upload manager. This is a view where users can see their uploaded files in a list/table and add files with a single <h:inputFile>, add descriptions, and so on. So the files are already in the system and get deleted after (say) 72 hours if they are not referenced.
Users then click on a link when they have to input a file, and choose the corresponding file from a list/table in a modal dialog. Therefore users have to upload their files first, before even filling a form, which is quite a pain, so it would be nice if they could also upload files in the modal dialog. (this would look like a view, where they have a single <h:inputFile> and a list of their already uploaded files). But there we have the same AJAX problem like in Option 3...
The only way I see to get around this, is to write something at the beginning of a form like:
For this form you need the following files in your upload manager:
- Photo
- Passport
Pros:
- technically: good because it's always only one file in a submit (AJAX?)
- no specific fallback mechanisms (except a 72hrs cronjob deleting unused files)
- users can upload multiple files for the (say) next 20 forms - this is good in our web application
Cons:
- users are not used to this technique
- even possible?
Do you have any other ideas to handle with this situation? I can't be the only one with this. Or are multiple file uploads like Primefaces good to configure for validations?
I hope you can help me out with this brainstorming
