Open "Upload File" Dialog Box onclick of an image

**tsoltysiak** · 04-28-2010, 04:51 AM

Hi,

I'm making an AJAX-type image uploader, using the hidden iFrame method. I have everything working well with the uploading when the form is submitted by clicking submit button, or in this case, when a file is selected and it submits "onchange".

What I would like to do is to have the <input type="file"> hidden, so instead of a user clicking the "browse" button to select which file to upload, they would click on the "upload.jpg" image, and have the select file box show up.

Here is the image I want to have clickable

Code:

<div id="uploadpic1" class="thumbimg">
   <a href="#" onClick="javascript:opendialogbox('imageuploadform1');">
      <img class="thumb" src="upload.jpg">
   </a>
</div>

This is the form with the file-input that is to be uploaded

Code:

<form id="uploadpic1" name="form1" action="uploadimage.php" method="post"
 enctype="multipart/form-data" target="upload_target1" onChange="this.submit()"
 onsubmit="startUpload();">
		<input type="file" id="imageuploadform1" name="picture" />
		<input type="hidden" name="divid" value="1" />
		<input type="submit" value="SUBMIT" />
</form>

This is the javascript code I am trying to use, but it is not working.

Code:

function opendialogbox(inputid){
document.getElementById(inputid).click();
}

When clicking the "browse" button, the window pops up, I can select a file, and it uploads properly, and everything works well. All I am trying to "click" the browse button by clicking on an image instead. The thing is, the image is not in the form, it is on another part of the page, and form will be hidden.

Thanks for your help,
Tom

**jscheuer1** · 04-28-2010, 11:36 AM

Actually, that approach should work, in IE. I'm not certain if any other browser has a .click() that acts as though the element were actually clicked upon. IE does. For others we can use the almost now universally accepted opacity style property and positioning, etc. to get what we want. IE doesn't support the opacity style property. IE does have an alpha filter that mimics opacity, but it requires javascript and can be disabled in IE, even while javascript is still active in that browser, so best to avoid it if possible.

Here's a little demo, any questions - feel free to ask:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
	position: relative;
	width: 3.75em;
	height: 1.25em;
	border: 1px solid red;
	overflow: hidden;
}
#doit, #hid {
	position: absolute;
	cursor: default;
}
#doit {
	top: 0;
	left: 0;
	border: 1px solid #000;
}
#hid {
	opacity: 0.001;
	font-size: 300%;
	top: -5px;
	right: -5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#hid {
display: none;
}
</style>
<![endif]-->
</head>
<body>
<div id="container" title="Choose File">
<div id="doit">
Whatever
</div>
<input id="hid" type="file" size=1>
</div>
<!--[if IE]>
<script type="text/javascript">
doit.onclick = function(){hid.click();};
</script>
<![endif]-->
</body>
</html>

Notes: You may replace the word "Whatever" with an image of your choosing. The dimensions are to fit the demo and may be adjusted as required. The borders are only there to show the overlap. If you want to see the file input (possibly important for non-IE browsers when fine tuning things for the layout - IE should always work out because its input isn't in the layout), remove its opacity property temporarily or set it to 1. The font-size on the input is to ensure it is large enough to fill the space. If your image is much larger, this font-size may need to be increased.

**tsoltysiak** · 04-29-2010, 02:49 AM

Thanks John,

After playing around with your suggestion for a couple of hours, I finally managed to get it to work (in Firefox). The thing is now it stopped working in IE. The select file window shows up when I click in IE (using the .click() javascript for IE), but then when the form is submitted, it has trouble uploading the file. It starts the submit process, but it doesn't make it through to the iFrame. However, if I select the file by clicking on the "browse" button (after un-hiding it), instead of through the .click() event, the file uploads correctly. That happens when using the exact same form, and using the same Submit button. Any Ideas?

Here is the html

Code:

	<form id="uploadform1" name="form1" action="uploadimage.php" method="post" enctype="multipart/form-data" target="upload_target1" onChange="this.submit()" onSubmit="startUpload();">
		<div id="uploadpic1" class="thumbimgtest">
			<a href="javascript:;" class="uploadcontainer" onClick="javascript:setnewpicidvalue('1');">
			<img class="thumb" src="upload.jpg">
			</a>
			<input class="imageselectinput" id="imageuploadform1" type="file" name="picture" />
		</div>
		<input type="hidden" name="divid" value="1">
		<div><input type="submit" value="SUBMIT" /></div>
	</form>

This is the JS with the .click() function. When clicked, the select-file box shows up, and when I select a file, it shows up into the proper <input type="file"> box, but when I click on the "Submit" button, it does not submit that part of the form.

Code:

function setnewpicidvalue(divid){
clickid = "imageuploadform" + divid;
document.getElementById(clickid).click();
}

This is the CSS, based on your example

Code:

<style type="text/css">
.thumbimgtest{
position: relative;
	overflow: hidden;
	background: green;
	width: 200px;
	cursor: pointer;}

.imageselectinput{
background:
	opacity: 0.5;
	font-size: 400%;
	height: 110%;
	top: -5px;
	right: -10px;
	position: absolute;
	cursor: pointer;
}

</style>
<!--[if IE]>
<style type="text/css">
.imageselectinput {
visibility: hidden;
}
</style>
<![endif]-->

Thanks,
Tom

**jscheuer1** · 04-29-2010, 03:04 AM

Well, though as you can tell from my previous post I was trying to avoid it, we could try using the IE method for opacity - my demo altered to do that:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
	position: relative;
	width: 3.75em;
	height: 1.25em;
	border: 1px solid red;
	overflow: hidden;
}
#doit, #hid {
	position: absolute;
	cursor: default;
}
#doit {
	top: 0;
	left: 0;
	border: 1px solid #000;
}
#hid {
	opacity: 0.001;
	font-size: 300%;
	top: -5px;
	right: -5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#hid {
filter:alpha(opacity=0.1);
}
</style>
<![endif]-->
</head>
<body>
<div id="container" title="Choose File">
<div id="doit">
Whatever
</div>
<input id="hid" type="file" size=1>
</div>
</body>
</html>

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**tsoltysiak** · 04-29-2010, 03:06 AM

Oh, and I just tested it in Safari and Chrome as well, here's a summary of the results:

Firefox : Works using the opacity method, and the onChange submit() works as well.

Safari : Works using the opacity method, but onChange submit() does not work

Chrome: Works using the opacity method, but onChange submit() does not work

IE: Using the .click() method, the File Upload box shows up, and upon selection, is entered into the <input type="file"> input. Form submission does not work though. When using the "Browse" button to select a file, and clicking the submit button, the submission works properly. onChange submit() does not work either

I know the onChange submit() isn't working for most of them, but I don't think that's related to the current problem of it not submitting properly. I'll worry about the onChange Submit() issue after this one is figured out.

Thanks,
Tom

**tsoltysiak** · 04-29-2010, 03:07 AM

Here is the test page right now
http://www.airline-luggage-regulatio...tureupload.php

**tsoltysiak** · 04-29-2010, 03:11 AM

I just added IE opacity you just posted, and it works. Now I just need to re-size to cover the picture.

Is there some reason that the IE opacity method should be avoided? Sorry, I'm new to this stuff, so just trying to learn what should or should not be done.

Thanks

**jscheuer1** · 04-29-2010, 03:16 AM

I'll have a look at your page when I have more time. However, it occurs to me that you must first test whether or not it works in all these browsers when the file input is used normally.

Reason being that the file input is one of the most (if not the most) restricted elements in all of HTML. Using its onchange event may simply not be allowed in some browsers.

**jscheuer1** · 04-29-2010, 03:44 AM

Looks like we cross posted - I addressed one question while you had moved ahead and then reported new information before my post was finalized.

Anyways, looks like you have your solution, do you?

And, to answer your question about IE and its opacity method:

IE doesn't support the opacity style property. IE does have an alpha filter that mimics opacity, but it requires javascript and can be disabled in IE, even while javascript is still active in that browser, so best to avoid it if possible.

This is a bit of a fine point. Your entire approach will fail or have to use some sort of server side fall back if javascript is disabled or unavailable on the user's browser.

However, in IE when using the alpha opacity filter, there is another layer of potential disability that can occur. In IE all of the style filters require javascript enabled and 'safe' Active X enabled.

Many IE browsers and especially network installed IE browsers have this 'safe' Active X functionality disabled because at one time it wasn't actually safe and many network admins haven't updated either installed versions or their installation routine. This latter guarantees that many future installs of IE will have this issue.

So, if your application depends upon one or more of these filters to work in IE, even if the IE user has javascript enabled, your application may still fail. This is relatively rare, but it adds another layer of potential failure to your application when viewed in IE. Hence my initial advice to avoid it if possible.

**tsoltysiak** · 04-29-2010, 03:56 AM

Ok, thanks for the heads up regarding the IE-opacity issues. Right now I'm not too worried if it doesn't look perfect for a small percentage of potential users, as the uploading image is not *that* important to the overall use of the site, if anything they can still upload, just be greated with a nasty gray square rather than a nice looking "upload" image.

Regarding the onChange Submit problem, I just found the solution in the thread archives, turns out it was one of your posts from 4 years ago: http://www.dynamicdrive.com/forums/s...ad.php?t=12869

Thanks for your help, John. Before I get back to working on it, I'll go make a donation to the Ocean Conservancy

Tom

Thread: Open "Upload File" Dialog Box onclick of an image

Thread Tools

Search Thread

Open "Upload File" Dialog Box onclick of an image

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions