Michael McGrady File Browse Buttons



Try the solution here: CLICK "Simple Html Solution" below

Simple Html Solution

SIMPLE TEST VERSION OF SOLUTION

<html>
	<head>
		<title>
			UPLOADER BROWSE BUTTON IMAGE TEST
		</title>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
		<SCRIPT TYPE='text/javascript'>
			function fillFacadeForm()
			{
				document.forms['facadeForm'].myFileText.value= document.forms['realForm'].uploadedFileParameterName.value;
			}
		</SCRIPT>
		<STYLE TYPE='text/css'>
			.fileUpload {
			-moz-opacity:0 ;
			filter:alpha(opacity: 0);
			-khtml-opacity: 0;
			}
		</STYLE>
	</head>
	<body bgcolor='#FFFFFF' text='#000000'>
		<br>
		<SPAN STYLE='position: absolute; middle: 10px; left: 10px;z-index: 1;'>
			<form
				name='realForm'
				action='/simple.html'
				method='get'
				enctype='multipart/form-data'>
				<input
					type='hidden'
					name='fileOp'
					value='fileValue'>
				<input
					type='file'
					class='fileUpload'
					name='uploadedFileParameterName'
					onkeyup='fillFacadeForm();'
					onmouseout='fillFacadeForm();'>
					<!--
						htmlFormPara is the name of the request parameter
						holding the file that is uploaded
					-->
				   
				<input
					type='image'
					name='submit'
					value='fileValue'
					src='./submit.gif'>
			</form>
		</SPAN>
		<SPAN STYLE='position: absolute; middle: 10px; left: 10px; z-index: 0;'>
			<form name='facadeForm'>
				<INPUT
					TYPE='text'
					NAME='myFileText'>
				<INPUT
					TYPE='image'
					SRC='./browse.gif'
					BORDER='0'>
			</form>
		</SPAN>
	</body>
</html>

Michael McGrady: Manually Coding File Browse Images

The following is one solution for using image buttons in place of the
standard browse button you get from <input type='file'>



This is not my final solution.  My final solution has an option of
 in the Crack Willow Tabs, which some of you know
about.  Here I only use <crackwillow:img> and <crackwillow:image>,
i.e. not <crackwillow:file> You can substitute the Struts taglibs
<html:img> and <html:image> in Struts for these tags.  The Crack
Willow Tabs create the images on the fly, dynamically.  I will
present that solution sometime in the future.

You Struts people will want to substitute ".do" for ".CRACKWILLOW".

The presentation below is in three parts with a screenshot:

SCREENSHOT
1.  FRAMESET
2.  HEADER FRAME with file upload image buttons
3.  CONTENT FRAME with file browse image buttons


The relevant code is in the content frame of the frameset file
uploading page given below.  Here is a screenshot of the result:



1.  Frameset Page for Uploading

This is the framesset page in which the header and content frames
reside.

<%@ page language='java' %>
<%@ page contentType='text/html; charset=UTF-8' %>

<%@ taglib uri='jstl-core'      prefix='c' %>
<%@ taglib uri='struts-bean'    prefix='bean' %>
<%@ taglib uri='struts-html'    prefix='html' %>
<%@ taglib uri='struts-tiles'   prefix='tiles' %>
<%@ taglib uri='crackwillow'    prefix='crackwillow' %>

<html>
	<head>
		<title>Uploader</title>
	</head>
	<frameset
		rows='360,*'
		border='0'
		frameborder='no'>
		<frame
			src='/uploader_header.CRACKWILLOW'
			name='form'
			scrolling='auto'>
		<frame
			src='/uploader_content.CRACKWILLOW'
			name='form'
			scrolling='auto'>
	<noframes>
		<body>
			<bean:message key='chat.room.javascript'/>
		</body>
	</noframes>
	</frameset>
</html>

2.  Header with Uploader Image Buttons

This is the header for the page with the operative buttons.

<%@ page language='java' %>
<%@ page contentType='text/html; charset=UTF-8' %>

<%@ taglib uri='jstl-core'      prefix='c' %>
<%@ taglib uri='struts-bean'    prefix='bean' %>
<%@ taglib uri='struts-html'    prefix='html' %>
<%@ taglib uri='struts-tiles'   prefix='tiles' %>
<%@ taglib uri='crackwillow'    prefix='crackwillow' %>

<html:html locale='true'>
  <body  background='resource.CRACKWILLOW?file=eclipse_uploader.jpg'>
  <table border='2' align='center' width='80%'>
  <td bgcolor='<c:out value="${hkc.banRtBgClr}"/>'>
	<table align='center' valign='middle'>
	<tr>
		<td border='0' width='33%'>
		  <a href='uploader.CRACKWILLOW' target='uploader.CRACKWILLOW'>
			<crackwillow:image
				button='EXIT.gif'
				mapBean='hkc'
				bgClrCode='banRtBgClr'
				txtClrCode='banRtTxtClr'
				font='Eurostile'
				italic='false'
				bold='true'
				size='20'
				property='exit.dispatch'/>
				</a>
		</td>
		<td align='center' valign='top' width='33%'>
			<crackwillow:img
				button='Crack_Willow_File_Uploader.gif'
				mapBean='hkc'
				bgClrCode='banRtBgClr'
				txtClrCode='banRtTxtClr'
				font='Edwardian Script ITC'
				italic='false'
				bold='true'
				size='30'/>
		</td>
		<td align='center' valign='top' width='34%'> 
		</td>
	</tr>
	</table>
	</td>
	</table>
	</body>
</html:html>

3.  The Impossible: Browse File Image Buttons

This page is the meat and potatoes.


<%@ page language='java' %>
<%@ page import='com.crackwillow.gui.HostKeyContainer' %>
<%@ taglib uri='jstl-core'      prefix='c' %>
<%@ taglib uri='struts-bean'    prefix='bean' %>
<%@ taglib uri='struts-html'    prefix='html' %>
<%@ taglib uri='struts-tiles'   prefix='tiles' %>
<%@ taglib uri='crackwillow'    prefix='crackwillow' %>

<html>
	<head>
		<title>
			UPLOADER BROWSE BUTTON IMAGE TEST
		</title>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
	</head>
	<body bgcolor='<c:out value="${hkc.banRtBgClr}"/>'>

    <script type='text/javascript'>

	   function fillFacadeForm1()
	   {
	    document.forms['facadeForm'].myFileText1.value= document.forms['realForm'].uploadedFile1.value;
	   }

	   function fillFacadeForm2()
	   {
	    document.forms['facadeForm'].myFileText2.value= document.forms['realForm'].uploadedFile2.value;
	   }

	   function fillFacadeForm3()
	   {
	    document.forms['facadeForm'].myFileText3.value= document.forms['realForm'].uploadedFile3.value;
	   }

	   function fillFacadeForm4()
	   {
	    document.forms['facadeForm'].myFileText4.value= document.forms['realForm'].uploadedFile4.value;
	   }

	   function fillFacadeForm5()
	   {
	    document.forms['facadeForm'].myFileText5.value= document.forms['realForm'].uploadedFile5.value;
	   }

	   function fillFacadeForm6()
	   {
	    document.forms['facadeForm'].myFileText6.value= document.forms['realForm'].uploadedFile6.value;
	   }

	   function fillFacadeForm7()
	   {
	    document.forms['facadeForm'].myFileText7.value= document.forms['realForm'].uploadedFile7.value;
	   }

	   function fillFacadeForm8()
	   {
	    document.forms['facadeForm'].myFileText8.value= document.forms['realForm'].uploadedFile8.value;
	   }

	   function fillFacadeForm9()
	   {
	    document.forms['facadeForm'].myFileText9.value= document.forms['realForm'].uploadedFile9.value;
	   }

	   function fillFacadeForm10()
	   {
	    document.forms['facadeForm'].myFileText10.value= document.forms['realForm'].uploadedFile10.value;
	   }

	   function fillFacadeForm11()
	   {
	    document.forms['facadeForm'].myFileText11.value= document.forms['realForm'].uploadedFile11.value;
	   }

	   function fillFacadeForm12()
	   {
	    document.forms['facadeForm'].myFileText12.value= document.forms['realForm'].uploadedFile12.value;
	   }

	   function reset()
	   {
	   	document.forms['realForm'].reset();
	   	document.forms['facadeForm'].reset();
	   }

  	</script>
		<style type='text/css'>
			.fileUpload {
			-moz-opacity:0 ;
			filter:alpha(opacity: 0);
			-khtml-opacity: 0;
			}
		</style>
		<span style='position: absolute; top: 30px; left: 200px;z-index: 1;'>
			<form
				name='realForm'
				action='/uploader.CRACKWILLOW'
				method='get'
				target='_top'
				enctype='multipart/form-data'>

				<input
					type='file'
					class='fileUpload'
					name='uploadedFile1'
					onkeyup='fillFacadeForm1();'
					onmouseout='fillFacadeForm1();'>
				<input type='file'
					class='fileUpload'
					name='uploadedFile2'
					onkeyup='fillFacadeForm2();'
					onmouseout='fillFacadeForm2();'>
				<input
					type='file'
					class='fileUpload'
					name='uploadedFile3'
					onkeyup='fillFacadeForm3();'
					onmouseout='fillFacadeForm3();'><br>

				<input
					type='file'
					class='fileUpload'
					name='uploadedFile4'
					onkeyup='fillFacadeForm4();'
					onmouseout='fillFacadeForm4();'>
				<input type='file'
					class='fileUpload'
					name='uploadedFile5'
					onkeyup='fillFacadeForm5();'
					onmouseout='fillFacadeForm5();'>
				<input
					type='file'
					class='fileUpload'
					name='uploadedFile6'
					onkeyup='fillFacadeForm6();'
					onmouseout='fillFacadeForm6();'><br>

				<input
					type='file'
					class='fileUpload'
					name='uploadedFile7'
					onkeyup='fillFacadeForm7();'
					onmouseout='fillFacadeForm7();'>
				<input type='file'
					class='fileUpload'
					name='uploadedFile8'
					onkeyup='fillFacadeForm8();'
					onmouseout='fillFacadeForm8();'>
				<input
					type='file'
					class='fileUpload'
					name='uploadedFile9'
					onkeyup='fillFacadeForm9();'
					onmouseout='fillFacadeForm9();'><br>

				<input
					type='file'
					class='fileUpload'
					name='uploadedFile10'
					onkeyup='fillFacadeForm10();'
					onmouseout='fillFacadeForm10();'>
				<input type='file'
					class='fileUpload'
					name='uploadedFile11'
					onkeyup='fillFacadeForm11();'
					onmouseout='fillFacadeForm11();'>
				<input
					type='file'
					class='fileUpload'
					name='uploadedFile12'
					onkeyup='fillFacadeForm12();'
					onmouseout='fillFacadeForm12();'><br><br>

				<crackwillow:image
					button='Upload.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Edwardian Script ITC'
					italic='false'
					bold='true'
					size='30'
					property='submit.dispatch'/>

				<html:img src='resource.CRACKWILLOW?file=clear.gif' width='30' border='0'/>

				<input
					type='hidden'
					name='fileOp'
					value='fileValue'>

				<crackwillow:image
					button='Reset.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Edwardian Script ITC'
					italic='false'
					onclick='reset()'
					bold='true'
					size='30'
					property='reset.dispatch'/>

				<html:img src='resource.CRACKWILLOW?file=clear.gif' width='30' border='0'/>

				<crackwillow:image
					button='Delete_Uploaded_Files.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Edwardian Script ITC'
					italic='false'
					bold='true'
					size='30'
					property='deleteRepository.dispatch'/>

			</form>
		</span>
		<span style='position: absolute; top: 30px; left: 200px; z-index: 0;'>
			<form name='facadeForm'>

				<input
					type='text'
					name='myFileText1'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/>   

				<input
					type='text'
					name='myFileText2'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/>   

				<input
					type='text'
					name='myFileText3'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/><br>

				<input
					type='text'
					name='myFileText4'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/>   

				<input
					type='text'
					name='myFileText5'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/>   

				<input
					type='text'
					name='myFileText6'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/><br>

				<input
					type='text'
					name='myFileText7'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/>   

				<input
					type='text'
					name='myFileText8'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/>   

				<input
					type='text'
					name='myFileText9'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/><br>

				<input
					type='text'
					name='myFileText10'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/>   

				<input
					type='text'
					name='myFileText11'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/>   

				<input
					type='text'
					name='myFileText12'>
				<crackwillow:img
					button='browse.gif'
					mapBean='hkc'
					bgClrCode='banRtBgClr'
					txtClrCode='banRtTxtClr'
					font='Bookman Old Style'
					italic='false'
					bold='true'
					size='15'/><br><br><br>
			</form>
		</span>
	</body>
</html>