Simulate a click() event on input type file in FireFox? 1

[iaresean]

Hi all;

Does anyone know how I can do the above? I thought it would be a relatively easy procedure, but can't seem to find a simple solution to do the job.

Any help/tips would be greatly appreciated!

Sean.

 

[theniteowl]

What are you trying to accomplish?
I do not think you are going to have any luck simulating a click event in the form even apart from being type=file.

Explain your goal and maybe we can offer other suggestions but essentially you do not have control over events that could simulate user actions as this would be a tremendous security issue.

At my age I still learn something new every day, but I forget two others.

 

[iaresean]

Hi theniteowl;

Yes, of course that is definitely a concern. No surprise that the click event works in IE then.

I am trying to style the input button for a file input control, which of course can't be done. I found the following link, but it isn't working out for me at all:

http://www.quirksmode.org/dom/inputfile.html

So now I am trying to make a hidden file input control, and would like to call the click event for this control using a style normal input button control.

For some reason I am really struggling to find content regarding the solutions to the above. I thought that all the CSS and Designer freaks out there would have had a hack for this situation in the bag already.

Thanks for your response, but any ideas on how I should approach my problem?

Sean.

 

[cLFlaVA]

you cannot set the value of a file field using javascript. this is a security risk. otherwise, i'd be able to upload any file i wanted to my server, then do with it what i please.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[iaresean]

Hi cLFlaVA;

Yes, I think theniteowl established that already.

I am looking for an alternative now.

Regards;

Sean.

 

[cLFlaVA]

your problem is styling a file type input field. you tried a known, working solution, and it didn't work.

suggestion is to take your actual code and question over to the HTML/CSS forum (forum215) for more help.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[theniteowl]

Well the click event is accessible for determining what was clicked but you cannot write into it to simulate an event as if it were user input.
However, I have seen articles before specifically addressing the styling of type=file input fields.

Take a look at this article.

http://www.quirksmode.org/dom/inputfile.html

At my age I still learn something new every day, but I forget two others.

 

[cLFlaVA]

LOL! that's classic theniteowl. read the OP's second post.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[theniteowl]

Whoops! Sorry, I sent you the same link you already said you had tried. Did not read thoroughly enough.

Remember that in the code shown on that site you have to make sure that visibility cannot be set to hidden as a hidden element is unclickable. You want the browse button to be on top of the normal button so it is the one actually clicked but set to opacity of 0 so you do not see it.

I have not tried this myself but it should work. Try creating a simple test with no extra code and set absolute positioning on each button to the same point. Make sure to set the z-index of the buttons.


At my age I still learn something new every day, but I forget two others.

 

[theniteowl]

Yeah I caught that immediately after I posted.
I get up way too early but I guess I do not WAKE up till much later. *Sigh*

At my age I still learn something new every day, but I forget two others.

 

[iaresean]

Haha;

No worries, for a moment I thought you were just taking the piss.

I will revisit this solution, and now that I have established that javascript isn't the solution here, I will move this post to the html/css forum as suggested by cLFlaVa.

Thanks guys;

Sean.

 

[theniteowl]

Well Javascript will work based on the method described on the site but breaking out their code is a bit complicated. I wish they had just posted a clean code sample.

Here is a broken down version of their CSS only example but that method hides the text input field.
You COULD use an onchange even in your file input field to break out the filename selected and display it in another field.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html lang="en">
<head>
<title>CSS2/DOM - Styling an input type="file"</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
form.example input {
	background: url('pix/input_boxes.gif') no-repeat 0 -58px;
	border: none;
	width: 241px;
	height: 20px;
	padding-left: 3px;
	padding-top: 3px;
}

form.example input:focus {
	background-color: transparent;
}

form.example div.fileinputs {
	position: relative;
	height: 30px;
	width: 300px;
}

form.example input.file {
	width: 300px;
	margin: 0;
}

form.example input.file.hidden {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: .5;
	z-index: 2;
}

form.example div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 350px;
	padding: 0;
	margin: 0;
	z-index: 1;
	line-height: 90%;
}

form.example div.fakefile input {
	margin-bottom: 5px;
	margin-left: 0;
}
-->
</style>
</head>
<body>
<p>Below is a pure CSS solution:</p>
<form action="#" class="example">
  <div class="fileinputs">
    <input type="file" class="file hidden" noscript="true" />

    <div class="fakefile">
      <input type="text"/>
      <img src="search.gif" alt="Browse" />
    </div>
  </div>
</form>

</body>
</html>

At my age I still learn something new every day, but I forget two others.

 

[iaresean]

Thanks for the effort nightowl!

Much appreciated!

Sean.