Best practice for multiple (single) file uploads in JSF 2.2 - ajax

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

Related

fineuploader - initial file list - edit file name functionality

When using the inital file list functionality to populate fineuploader with previously stored files, is it possible for the edit filename functionality to be used?
At the moment it seems that the edit elements are hidden in the template, although it would be relatively simply if this functionality were enabled to hook onto the rename trigger and save the updated filename via ajax (what i'm hoping to achieve).
So is there someway to enable the edit filename for the initial file list?
Your requirements are outside of the scope of a file upload library. If you want to allow your users to rename a file uploaded in a different session, you will need to provide for this in your custom web application. You can certainly modify the file list provided by Fine Uploader after it is rendered with the initial files.

How to get data from grid and download them like .csv file in ExtJS 4.2

I have a Ext.grid.Panel and I fill it with store that is populated from database. And there is an export button. When the user click on the Export button, I want the data from grid should start downloading like .csv file
The best solution to creating any type of file (Excel, CSV, PDF, whatever) is going to be leveraging your application server to create and serve up the file for download. There are literally thousands of libraries across most of the popular server-side languages that can create just about any kind of file that you'd want to create.
So ultimately this has nothing to do with Ext JS or even JavaScript. All that your export button should do, IMO, is to create an AJAX request which triggers the process (query, transform results, publish to a correct content type, stream to browser) that will be needed to generate the content from your application server technology.
Sometimes you can't leverage an application server such as when your back end is a micro controller or you can't get the back end people to make the change.
I've not used this, but it looks nice:
http://www.sencha.com/forum/showthread.php?136598-Export-store-to-Excel

Uploadify using multiple files, one mvc controller call

From all I have read in Stackoverflow and Google, it seems that once again I am forced to work around IE. Since it doesn't support multi, I am forced to use Uploadify or some other 3rd party pluggin. Thanks Microsoft..
I want to verify that there is no way to automatically batch multi-select files into one MVC controller call using Uploadify. I think there are ways whereby a user can add files, then press a button to upload the files, but is this it??? What pluggin will allow a user to select 4 files, close the file browse dialog, then automatically send all of the files in one http post?????
thanks
You can check the documentation of uploadify, it can select multiple files using multi option.
You can also upload after all the files are queued using auto:false option.
Here is what you can upload after queuing

Spring web mvc 3.0 Form data and image upload issue

I am new to spring and JSP. My web application is spring powered, which I run locally in apache tomcat.
In my JSP page I have multiple file-upload inputs and many text input fields.
Every time, when I press any of the upload buttons, a HTTP POST request goes to my controller from where on I may save the image to the database.
But, what I want is:
I will upload the images one by one ( preferably by staying in the page) but won't save them in database and then when I press submit to get the rest of the input text fields data, I commit all the data, including image, texts to the database in one try.
I have heard of scope="session" for my controller(bean) in the dispatcher-servlet.xml ... but I am unsure as to if I upload image to my controller and get back to my JSP form, will the bean keep my already uploaded images?
I think it is hard for me to explain, so please let me know if my question is not clear.
It would be nice if anybody can come up with a suggestion that may help to obtain my goal.
Are you uploading a varying number of images, as in if someone wants to upload only 2 they'll have 2 file fields on the form, or does everyone get 5 fields for example?
To be honest, the whole scheme of incremental upload sounds a bit overcomplicated at this stage. (Unless you have an explicit need to show progress bars on each upload, etc.) What if the user abandons the form after uploading the first image? You'd need a pretty solid mechanism to keep track of the entire visit, keeping it in the session wouldn't help here. Can a user pick up where they left off? If you make the whole thing work with single form submit click first, you can break it out and fine tune the process later. I mention that since you stated you're new to jsp and Spring (what's your experience with web dev otherwise?)
I think the best way is to upload file using ajax control rather than submitting form for each upload and store the file references in session scope variable(attribute). there are lot of libraries have ajax based file uploading like extJS, JQuery, GWT, DWR , whatever ajax library you are using in your web application.

What is algorithm that shall be added to "comon HTML" file upload server side to make it accept "AJAX"/"HTML5" files Upload?

I wonder what are changes/(steps to make) that are required to implement to server side that allows "comon HTML form" file upload to make it accept HTML5 or AJAX multiple files upload?
None. Any server-side form handler that can accept at least 1 file in a form submission can be used to accept files uploaded via AJAX form submits (you just have to make multiple submits).
Now, there are ways to make server-side form handling more flexible, but you haven't given any details to work with so we have no idea what you are currently doing and therefor have no way to know what might need to be done to improve it.

Resources