Tag Archives: file upload

How to allow File Uploads when using jQuery Mobile CodeUnit 16 DEC 2011

With the release of the powerful jQuery Mobile 1.0 framework, it is now becomes possible for pretty much anyone to crank out an uber slick HTML 5 website that looks like a ‘native app’ on just about any mobile device.

However, one of the things that does break on implementation is the trusty old form file upload element, the result of the nifty AJAX-driven page load system that jQuery Mobile uses. (AJAX doesn’t allow file transfers as a security feature).

Luckily for us though, there is a way to re-enable form file uploads with the only sacrifice being the slick page load, which when you think of it, isn’t such a big sacrifice now that you have the ability to launch files up to your web service once more!

In short, what we want to do is instruct the jQuery Mobile framework to not process the form submit event as an AJAX call. To do this, the following “data-ajax” element property needs to be added to your form declaration:

<form method=”POST” enctype=”multipart/form-data” action=”process_update.php” data-ajax=”false”>

Simple as that.

PHP: File Upload Error Code CodeUnit 21 NOV 2010

When handling file uploads via enctype=”multipart/form-data” forms in PHP, you’ll be pleased to know that PHP doesn’t just leave you high and dry but instead returns some pretty helpful error codes to let you know when something goes wrong.

The following is a comprehensive listing of the error codes returned by the upload process:

(Note, these can be access from $_FILES[‘#inputname#’][‘error’])

...

Web on the BlackBerry: Customize File Upload Input Style CodeUnit 21 DEC 2009

blackberry8820One 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:

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 */