christierney402/hideFileInput.htm

## hideFileInput.htm
<!DOCTYPE html>
<html>
<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>

	<style>
		input {
			display:none;
		}
	</style>

	<form method="post" enctype="multipart/form-data">
		<div id="wrapper" style="background-color:red;">click here to upload<br><br>
			<input type="file">
		</div>
	</form>

	<script>
		var $fileUploadInputWrapper = $('<div/>').css( {height:0, width:0, 'overflow':'hidden'} );
		$(':file').wrap($fileUploadInputWrapper);

		// to use stopPropagation instead if statement use:
		// $('#wrapper > :file').click(function(event) { event.stopPropagation(); });
		$('#wrapper').click(function(event){
			if( !$(event.target).is(':file') ) {
		    	$(':file').click();
		    }
		});

		$(':file').change( function() {
			$('form').submit();
		});
	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	</head>

	<body>

	<style>
	input {
	display:none;
	}
	</style>

	<form method="post" enctype="multipart/form-data">
	<div id="wrapper" style="background-color:red;">click here to upload<br><br>
	<input type="file">
	</div>
	</form>

	<script>
	var $fileUploadInputWrapper = $('<div/>').css( {height:0, width:0, 'overflow':'hidden'} );
	$(':file').wrap($fileUploadInputWrapper);

	// to use stopPropagation instead if statement use:
	// $('#wrapper > :file').click(function(event) { event.stopPropagation(); });
	$('#wrapper').click(function(event){
	if( !$(event.target).is(':file') ) {
	$(':file').click();
	}
	});

	$(':file').change( function() {
	$('form').submit();
	});
	</script>

	</body>
	</html>