This week's book giveaway is in the Mac OS forum.
We're giving away four copies of a choice of "Take Control of Upgrading to Yosemite" or "Take Control of Automating Your Mac" and have Joe Kissell on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes File upload component - Cancel event Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "File upload component - Cancel event" Watch "File upload component - Cancel event" New topic
Author

File upload component - Cancel event

salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

I am using a file upload control in my project,
for designing reasons, here is my implementation:
I have shown a link to the user with the file upload control overlapping it(and is transparent - not hidden).
In IE, when the link is clicked, i fire the upload control's onClick Event. thus the user is shown the select file dialog

In Firefox, chrome and safari, I have written browser specific css so that the the the transparent upload control is in front of the link (z-order)
so when user clicks on the "link", he is actually clicking on the file upload control and is shown the select file dialog

Thus i have achieved pretty much what gmail did with flash.


Now here is where i am getting stuck up,

1. User clicks link.
2. User selects a file
3. User clicks okay
4. Control returns to javascript, I upload the file.

So far so good,

issue:

1. User clicks link.
2. User selects a file
3. User clicks CANCEL
4. Control returns to javascript (Obviously i should not upload anything) >> I AM NOT ABLE TO TRACK THE CANCEL EVENT



Second approach i used:
I tracked the upload's onChange Event this takes care of not needing to handle cancel event, But here is the problem:

1. User clicks link.
2. User selects a file
3. User clicks OK
4. Control returns to javascript. I upload the file.
5. User once again clicks link
6. User selects SAME file again.
7. onChange is NOT fired (obviously since the path is the same) >> I AM NOT ABLE TO TRACK THE OKAY EVENT

People have told me to "reset" the form by removing the upload control and adding a new one. But this approach does not work.


Actually this project is in GWT so its entirely using AJAX and controls are loaded on the fly, so i cannot change the "innerHTML" here

I could not post my code here (company policy),
But i guess i have explained my problem well enough

My Website: [Salvin.in] Cool your mind:[Salvin.in/painting] My Sally:[Salvin.in/sally]
Sagar Rohankar
Ranch Hand

Joined: Feb 19, 2008
Posts: 2902
    
    1

salvin francis wrote:
4. Control returns to javascript (Obviously i should not upload anything) >> I AM NOT ABLE TO TRACK THE CANCEL EVENT

That's mean, the OK and CANCEL buttons both returning the same value, i.e true, strange ??

[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

sadly, yes.

i cant event track the event.

interestingly, Chrome does support the click event with a twist : Script does not Pause until user selects file
safari works like IE

and Firefox...... sucks as usual. does not have a click event at all.
Sagar Rohankar
Ranch Hand

Joined: Feb 19, 2008
Posts: 2902
    
    1

How you creating the "file upload select" dialog box, the code snippet of same will help much
Saifuddin Merchant
Ranch Hand

Joined: Feb 08, 2009
Posts: 605


One - I take offense to this. FF is my favorite browser & its a pretty good standard complaint browser. If something does not work on FF - most probably you are doing something wrong!
What click event are you looking for anyways? I did not really get that statement.


Coming back to your problem,
1. User clicks link.
2. User selects a file
3. User clicks okay
Step Introduce -
a. Check if the File Control has a value or not (or alternately compare with the value of the previous file uploaded.) If it has a new value then the user must have clicked the Ok button. If its empty or the old value- the user has clicked canceled.
b. Save the FileUploadedValue in a variable so that it can be used in the next comparison.

4. Control returns to javascript, I upload the file.

Should take care of some of your issues. I sure this could introduce another set of issues & you core issue that you cannot extract whether the User has selected a file or clicked canceled. I don't know of any way you could do that.


Cheers - Sam.
Twisters - The new age Java Quiz || My Blog
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

alas Firefox does have a good fan following, but i still hate it

File Upload widget in firefox does not have a Click event

So this does not work in firefox:


Code works fine in IE,Chrome,Safari (with the exception that chrome does not halt program execution at the click event).

If something does not work on FF - most probably you are doing something wrong!

This is a very very common statement i hear about firefox. I am however of the opinion, we are humans after all, we do make mistakes
(check the way firefox implements the Box model !! The SKELETON of designing!)


here is the problem in your approach:
1. User selects a File (say a.txt)
2. User clicks Submit (in gwt, form.submit() does not reset the controls since its Ajax)
3. My user realises that a.txt needs changes, he changes it a bit, and now wants to upload it again....
4. He clicks the link and selects a.txt file again. (note that the upload control does not fire the onChange event here as the file is still a.txt)
5. So nothing happens on the screen!!

So, it boils down to the same thing, i am unable to track OKAY event in this case, and onChange is not fired since path remains the same.
If i could somehow clear the file upload control the above problem would have been solved.
Saifuddin Merchant
Ranch Hand

Joined: Feb 08, 2009
Posts: 605

salvin francis wrote:alas Firefox does have a good fan following, but i still hate it
Personal opnion - which is fair enough

File Upload widget in firefox does not have a Click event

So this does not work in firefox:


Code works fine in IE,Chrome,Safari (with the exception that chrome does not halt program execution at the click event).

The input type=file does not have a click event - so firefox does not suppot it - Fair isn't it?
http://www.w3schools.com/htmldom/dom_obj_fileupload.asp

If something does not work on FF - most probably you are doing something wrong!

This is a very very common statement i hear about firefox. I am however of the opinion, we are humans after all, we do make mistakes
(check the way firefox implements the Box model !! The SKELETON of designing!)
Yes this is a topic of contigency - the point is no one is sure whats right so you really cant put the blame on FF

here is the problem in your approach:
1. User selects a File (say a.txt)
2. User clicks Submit (in gwt, form.submit() does not reset the controls since its Ajax)
3. My user realises that a.txt needs changes, he changes it a bit, and now wants to upload it again....
4. He clicks the link and selects a.txt file again. (note that the upload control does not fire the onChange event here as the file is still a.txt)
5. So nothing happens on the screen!!

So, it boils down to the same thing, i am unable to track OKAY event in this case, and onChange is not fired since path remains the same.
If i could somehow clear the file upload control the above problem would have been solved.

ahh - but you cannot clear the upload control its value is read only - Security reasons


See my answers inline - Alas I dont have a solution to your problem - You see thats the reason why Flash is more commonly used while trying to manupilate the file upload box - browsers have different opinion on it + it has security related issue.

Hopefully you'll find a solution soon - I definetely keen to learn if any does exists!!
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

It seems that removing the upload control and adding a new upload control is a way of resetin it !
But i have to give it a try.......

i wonder how gwt will behave to a form being submitted in this way.....

still waiting for futher opinions ....
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

Sagar Rohankar
Ranch Hand

Joined: Feb 19, 2008
Posts: 2902
    
    1

Without a code snippet, its hard to dig up the problem..
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

Eureka !!!
It works now !

Here was the solution:
1. Remove the current File upload control
2. Add a new File upload control
3. ENSURE new File upload control has the same Name.

My mistake: point no# 3 was not followed and so it didnt work at all (silly me)

a saying goes in hindi: bade bade project mein aise choti choti galtiyan hoti rehti hai...
Translated in english : In big projects we do make small mistakes
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

Sagar Rohankar wrote:Without a code snippet, its hard to dig up the problem..


Sorry sagar, as mentioned i could not provide the source code [company policy]

but if any one has a similar issue, i guess my solution would work fine.
Sagar Rohankar
Ranch Hand

Joined: Feb 19, 2008
Posts: 2902
    
    1

salvin francis wrote:
Sagar Rohankar wrote:Without a code snippet, its hard to dig up the problem..

Sorry sagar, as mentioned i could not provide the source code [company policy]

I don't understand what company policy lies in NOT exposing a simple code about How to create a upload box ??
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Btu company policy lets you get free advice.
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928



It happens only in india
Sagar Rohankar
Ranch Hand

Joined: Feb 19, 2008
Posts: 2902
    
    1

salvin francis wrote:It happens only in india

No, its happens in some company's who believes exposing a simple few lines of code can cause the intellectual property loss. I wonder if your company uses any Open Source code or develop its own
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928


correction: It happens in some companies
 
GeeCON Prague 2014
 
subject: File upload component - Cancel event