The moose likes JSF and the fly likes Conditionally invokink JavaScript when uploading a file Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of REST with Spring (video course) this week in the Spring forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "Conditionally invokink JavaScript when uploading a file" Watch "Conditionally invokink JavaScript when uploading a file" New topic

Conditionally invokink JavaScript when uploading a file

Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155

I am using the PrimeFaces component <p:p:fileUpload/> to upload files in my JSF 2 application, which works perfectly OK. However, I want to invoke a JavaScript box if I attempt to upload a file into a folder, when a file of that name already exists. It then asks you if you want to upload the file and overwrite the existing file, or cancel the operation.

For example, I could have someline like:

Where either the javaScript warn() function is called from onstart or oncomplete, and a JavaScript box only appears if the condition inside a bean "file.exists()" is true, otherwise no JavaScript is executed, or at least if it is, it does nothing.

How do I conditionally invoke warn() based on the property in a bean, and if so, should I use oncomplete, which makes more sense.

Some ideas of this would be appreciated - thank you.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
Ok, I have found a partial solution to this problem that does not use onstart or oncomlete in the <p:fileUpload/> tag.

I found that with code of the type:

it pops up the JavaScript alert() box if the condition is true, but what I want to do is something like this:

where the "confirm()" box is displayed if the condition is true, then depending on how the user responds, either true or false is returned from the "confirm()" box. How to I pick up the return value and pass it to a Java boolean flag? In general, how would I pick up any value returned by a JavaScript function inside a bean?

There are probably various ways of doing this, but I just want a simple solution. Any ideas would be most welcomed.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 17278

File uploading is done in HTTP by creating an HTTP FORM submit data stream and MIME-encoding a copy of the file's data into that stream. So the only way to avoid uploading the file is to suppress the HTTP SUBMIT.

Because JavaScript runs client-side and the existing file would be on the server, the only way to do this is to AJAX-query the server to see if the file exists BEFORE you allow the submit.

In other words, something like this, in the form's "onsubmit" event handler:

Note also that BECAUSE the actual file data is copied, and not the file itself, the server name for the file doesn't have to be anything like the client file name. And, in fact, you don't have to store the uploaded data in a file at all. You can store it in a database blob, dissect it and use the information in it, or do anything else you want to with it. So you wouldn't literally be "replacing the file" unless you chose to put the incoming data in the same place as previous data matching that upload filename value.

An IDE is no substitute for an Intelligent Developer.
Christopher Sharp
Ranch Hand

Joined: Dec 12, 2007
Posts: 155
Hi Tim,

I put this issue on the back burner for a week, and have just got back to it, and have mostly solved it with PrimeFaces, but there is still an issue.

In my JavaScript and xhtml code I have the following:

The <p:fileUpload/> provides choose, upload and cancel buttons. After the clicking the choose button to select a file, the user then clicks the upload button, which invokes my "copyFile()" method in my bean. If a file with the same name already exists in the folder, the RequestContext......() method is called, which invokes the JavaScript. I can pass true or false from the JavaScript back to the bean via <p:remoteCommand/>, which invokes the method execOverwrite() in my bean here:

This indeed now works. However, the problem is that the code does not resume execution after RequestContext......(), which it needs to do. The idea is that the flag overwrite is set to true, then later tested.

It looks as if this is an issue of having to deal with a callback function, so that execution can resume in the method copyFile(). Do you or anybody else know how to do this?
I agree. Here's the link:
subject: Conditionally invokink JavaScript when uploading a file
It's not a secret anymore!