Web on the BlackBerry: Customize File Upload Input Style

One of the things we do here at Touchwork is create web-based audit capture systems which are intended for use on mobile phones by various auditor class people. One such system that we currently run at the Manchester Airports Group came back to report that the photo upload button was in fact not behaving correctly on the BlackBerry, the most likely culprit being the minimized styling we employ on the mobile site itself.

Of course, seeing that the file upload button seems to be working perfectly fine on other makes of phone currently in use, I took the decision to implement a fix exclusively for BlackBerry devices and so inserted a check based on the user agent passed back by the phone:

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'blackberry') === false)
{
//carry out normal code
} else {
//do blackberry-specific stuff
}

The next step was then to figure out just how I was going to solve my particular problem. Remembering that I have no javascript or other client-side scripting tools available to me, the solution would have to lie in plain old CSS trickery – and that’s exactly what I (with some help off the web) came up with!

So the solution?

Well essentially it is a matter of tweaking the file input type’s opacity to zero, thereby leaving it functional but at the same time invisible to the user browsing the page. Next is to make use of a label and size it so that is overlays the input box and essentially becomes a faux button, as clicking on it is actually triggering the file upload button that is lurking unseen above it.

So simple enough, but it works like a charm, the only drawback being of course that a user doesn’t get notified on the screen once he has selected a valid file to upload – but I guess we can’t both have our cake and eat it as well after all!

So, the mark-up you’ll need for this little trick is:

Browse

And the styling to be applied to this is:

/* FILE UPLOAD CSS TRICK FOR BLACKBERRY */
.file-upload {
	overflow: hidden;
	display: inline-block;
	position: relative;
	vertical-align: middle;
	text-align: center;

	/* Cosmetics */
	color: #fff;
	border: 2px solid #ff872f;
	background: #ffb36f;

	/* Nice if your browser can do it */
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	text-shadow: #000 1px 1px 4px;
    }

.file-upload:hover {
	background: #ff872f;
	}

.file-upload.focus {
	outline: 2px solid yellow;
	}

.file-upload input {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	font-size: 70px;

	/* Loses tab index in webkit if width is set to 0 */
	opacity: 0;
	filter: alpha(opacity=0);
	}

.file-upload strong {
	font: normal 1.4em arial,sans-serif;
	}	

.file-upload span {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;

	/* Adjust button text vertical alignment */
	padding-top: .45em;
	}

/* Adjust the button size */
.file-upload { height: 2.5em; }
.file-upload,
.file-upload span {	width: 9em; }	

.file-upload-status {
	margin-left: 10px;
	vertical-align: middle;
	padding: 7px 11px;
	font-weight: bold;
	font-size: 16px;
	color: #888;
	background: #f8f8f8;
	border: 3px solid #ddd;
	}
/* END FILE UPLOAD CSS TRICK FOR BLACKBERRY */