Faux File Upload Input

Posted: August 27, 2015 in HTML
Tags: , ,

The element <input type=”file”> is very ugly in most browsers and it seems that even Bootstrap didn’t put any effort into sprucing it up.

My end objective was to have a user press a rectangle box with a title inside which would open a file dialog and ultimately upload that file.

At first I thought this would be easy after some quick research in Google land. Not so.

Note: I’m using the jQuery 2.x library in my examples

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

<form method="post" enctype="multipart/form-data">
	<div id="wrapper">click here to upload<br><br>
		<input type="file">
	</div>
</form>

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

At first I thought it would be as easy as 1) hiding the input 2) watching the click event on the container 3) trigger the input’s click event and 4) submit the form.

But what I found out was that the event listener kept firing infinitely until the browser aborted with a “Uncaught RangeError: Maximum call stack size exceeded” error in the console. Though honestly I don’t completely understand what’s going on here, the click event by my mouse bubbles up to the child input element.

To resolve that issue I started looking for the event that was not fired by the input element:

<script>
	$('#wrapper').click(function(event){
		if( !$(event.target).is(':file') ) {
	    	$(':file').click();
	    }
	});
	
	$(':file').change( function() {
		$('form').submit();
	});
</script>

At this point @chrish on CFML Slack was helping me out and also offered up a solution were as now we are stopping propagation for the input element.

<script>
	$('#wrapper > :file').click(function(event) { event.stopPropagation(); });
	$('#wrapper').click(function(event){
    	$(':file').click();
    }
	
	$(':file').change( function() {
		$('form').submit();
	});
</script>

I ended up sticking with the first solution incorporating the “if” statement until Jessica Kennedy reminded me of a simple solution using the label element. Because this simplifies things (AKA less likely to break) I’m now sticking with this solution. Normally a label will focus on the input field when clicked on. But in this case it fires off an event to open the file dialog. I’ve tested this in Chrome, FireFox and IE 9+. I’m pretty sure the label element has some limitations what you can stick in it, so this may not always work for you. But in my case I was able to apply the Bootstrap widget classes (not seen in this example) and it worked as expected.

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

<form method="post" enctype="multipart/form-data">
	<label id="wrapper">click here to upload<br><br>
		<input type="file">
	</label>
</form>

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

javalogo-81x162I happened to read a post on Adobe’s ColdFusion Facebook page, that references a blog post, that references a pretty obscure tip. ColdFusion really needs to implement this somehow in CF Admin like a configurable directory for this file.

I remember knowing this step, but forgot, because it’s documented in obscure places like in the upgrade notes when ColdFusion releases a patch that officially supports a newer version of ColdFusion.

Anyway, ending my rant, when you upgrade to a new major version of Java (and in my opinion every minor version too) be sure to do the following:

  1. Copy tools.jar from {JDK_Home}/lib to {cf_install_home}/{instance}/lib/
  2. Delete all files from {cf_install_home}/{instance}/stubs/ to get the newly compiled classes.

Only JDK contains the tools.jar file not the jre installation. You don’t have to install JDK on the machine where ColdFusion is installed. You can just have jre on this machine and get tools.jar from any other machine’s JDK installation.

Windows 10 God Mode

Posted: August 4, 2015 in Uncategorized
Tags: ,

I became brave and updated both my work, personal and family computers to Windows 10. So far I’ve had limited issues:

  1. Had to do an “online repair” of Office 2013 for Word files to open again. This was a Win 7 to Win 10 upgrade.
  2. Can’t find a proper driver that will work for my office’s 1320c Laser printer. I hardly ever print, so this is low priority for me. This was a Win 8.1 to Win 10 upgrade, but I didn’t try the Win 8.1 driver either when it was installed.
  3. Can’t print wirelessly to my home Epson multi-function printer. Something tells me that if I reinstall it, it’ll work fine. This was a Win 8.1 to Win 10 upgrade.

But here’s what I’m really blogging about… “God Mode”.

This tweak is the same as previous versions of Windows and gets you to 260+ functions and tools. You can drag-and-drop any of the commands to your desktop to create shortcuts for the command as well. To enable it:

  1. GodModeIconCreate a new folder on your Windows desktop
  2. Label it: GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}
  3. It will change its icon and label to “God Mode”

Credit: SuperSite for Windows: Enabling GodMode for Windows 10

Another favorite feature is the “Snipping Tool”. This tool allows you to take custom screen shots and mark them up. It even has a delay feature so you can setup drop down menus before it shoots the screen. Just search for it in your start menu.

I had a unique request to copy a list of folders out of a greater collection of folders. Seeking the best way to do this I found this solution thanks to sidesofmarch:

Step 1:

Create a text (ex: migrate.txt) file containing a list of folders to be copied or moved, each folder name on a new line.

Step 2:

Run a for/in loop while inside the Windows Command Prompt. Add the /move attribute to robocopy to move instead of copy. Google “robocopy” for more options. In this example %i is the folder name which copies it to the root of E: drive.

for /f "delims=" %i in (migrate.txt) do robocopy "%i" "E:\%i" /e /z /MT /log+:log.txt

Note: if you put this command in a batch file use %%i instead of %i

Tested 7/29/2015 on Windows 10

If you didn’t get ColdFusion 11’s (and probably 10’s) ODBC Server and Client services installed but end up needing them you can create a simple ColdFusion script to get it installed.

adminObj = createObject("component","cfide.adminapi.administrator");
adminObj.login("{CF Admin Password}","{CF Admin User}" );
adminObj.installODBCservice(); 

July 2nd 2015 marked Adobe ColdFusion’s (then Allaire’s ColdFusion) 20th birthday. Starting back in 1997, I have made a living programming in ColdFusion for about 17 of those years (I took off a year while fixing computers instead).

End of Junior year in high school I decided to look for a job. I’ve worked here and there for my grandfather in the music sales industry and my father in the HVAC industry.

I was intrigued by what was BBS systems and the Internet and made some super simple web pages with what would be now considered super annoying JavaScript. I believe it was my friend Gabe Spargen who turned me on to JavaScript because I couldn’t let his website be “cooler” than mine. This turned into the counseling department to have me set up their department website which consisted of a bunch of links and information for applying to colleges. I remember the cool factor being a select box that would take you to a link upon selection. In the end though it was “too advanced” and was converted to standard links.

Even before all that back in grade school days I’d find my way onto any BBS system that I could and even learned some PC Q-Basic and Apple IIe BASIC.

Taking my tinkering I started looking through the yellow pages for potential employers. At this time I was just looking for something in the computer industry. As happen I dialed the wrong number and reached David Shaul with “Practical Computer Concepts” known as “PCC”. He had me come on in for an interview.

Read the rest of this entry »

Seeing that someone was trying to hit wp-login.php (WordPress login) a few times a minute on one of our servers at CF Webtools we decided to block any PHP requests since this is a ColdFusion server. It wasn’t as easy as I thought. This is a Windows 2008 R2 server running IIS 7.5 and ColdFusion 11.

Sample URL:
http://www.mysite.com/index.cfm/main/mypage/id/68249/id2/wp-login.php

At first I tried using Request Filtering under the “Rules”, “URL” and “Query Strings” tabs. These had no effect.

I then went to URL Rewrite where there was a custom rule to allow index.cfm to be absent from the URL.

<rewrite>
    <rules>
        <clear />
        <rule name="Rewrite FW/1 SES index.cfm">
            <match url="^(?!css|js|fonts)(.*)$" />
            <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                <add input="{REQUEST_URI}" pattern="^.*\.(bmp|css|gif|htc|html?|ico|jpe?g|js|pdf|png|swf|txt|xml|ttf|woff|eot)([/?].*)?$" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.cfm/{R:1}" logRewrittenUrl="true" />
        </rule>
    </rules>
</rewrite>

I then tried adding a rule using the default settings of wildcards. While the test responded okay, the actual page kept processing the URL.

Thanks to Wil Genovese, after switching the regular expressions and enclosing those in parenthesis, “.php” requests were finally denied.

<rule name="No PHP" stopProcessing="true">
    <match url="(.*)" />
    <conditions>
        <add input="{PATH_INFO}" pattern="(\.php)" />
    </conditions>
    <action type="AbortRequest" />
</rule>

2015-05-26_1538