4 Replies Latest reply on Feb 10, 2009 5:22 AM by andrei_exadel

rich:fileUpload...javascript hook after each upload

zmarrapese Feb 6, 2009 5:40 PM

I'm trying to create a progress bar that keeps track of the total files which are being uploaded, and increments after each file's upload has completed. However, I have been unsuccessful to date.

I see the onuploadcomplete event, but this only seems to fire after all the files have been uploaded.

The fileUploadListener allows me to tie into my backing bean with a listener after each file is uploaded. However, I can't update the DOM from there.

I realize I can use the progress bar in ajax mode, but I'm not really interested in it polling the server. Also, this will be slow to respond unless I set the polling interval very small.

Ideally, I want to update my progress bar after each file has been uploaded using the javascript API.

Any suggestions?
Thanks in advance,
~Zack

1. Re: rich:fileUpload...javascript hook after each upload

andrei_exadel Feb 7, 2009 7:13 AM (in response to zmarrapese)

Seems that currently fileUpload has no event for each upload completed.
I can suggest you to implement custom interval function that will check the status of files in the list.

Use the next code to get list of files and their statuses:

$('fileUplaodId').component.entries - array of objects referenced to files in the list
$('fileUplaodId').component.entries[n].status - status of the n-th file

Status can be value of:
1. FileUploadEntry.READY : file added to list
2. FileUploadEntry.INITIALIZED : file was queued for uploading
3. FileUploadEntry.UPLOAD_SUCCESS : file was uploaded successfully
4. FileUploadEntry.UPLOAD_CANCELED, FileUploadEntry.UPLOAD_TRANSFER_ERROR,
FileUploadEntry.UPLOAD_SIZE_ERROR - error statuses

So, you can get count of files in the list, count of already uploaded files and calculate summary progress for client progressBar component.
Actions
2. Re: rich:fileUpload...javascript hook after each upload

zmarrapese Feb 9, 2009 2:32 PM (in response to zmarrapese)

Thanks for the response, andrei. The only question I have about this is how would I trigger this custom function?
~Zack
Actions
3. Re: rich:fileUpload...javascript hook after each upload

nbelaevski Feb 9, 2009 3:12 PM (in response to zmarrapese)

Hi Zack,

You can use this: http://www.prototypejs.org/api/periodicalExecuter
or that: http://www.w3schools.com/HTMLDOM/met_win_setinterval.asp
Actions
4. Re: rich:fileUpload...javascript hook after each upload

andrei_exadel Feb 10, 2009 5:22 AM (in response to zmarrapese)

Please use oupload event that is called before uploading process - the point when you should start the interval function.
The finish point is the onuploadcomplete event.
Actions

Go to original post