Category Archives: web

Filereader API and HTML 5 to display images in forms

So,  recently  I was working on creating a HTML form for users to register for a website and being no expert on HTML I ran across multiple issues. Most of them were fairly trivial and could be easily solved by reading through HTML, javascript and PHP help or searching the internet, but one of them stood out. I wanted to provide a form that allowed users to upload images (self), but I did not want to store the images on the server until they submit the whole form. There are multiple articles on how to upload the images into a temporary folder on the server and then display them or use one of the many available services, but not a very a clear article on how to do just read and display the image on the client itself.

It is only then that I came across this tutorial that a HTML 5 file reader API even  existed. I have just tweaked this tutorial for my needs to allow the browser to read the selected file and display it in the form itself before the form is submitted. My simple form does not provide additional image services (like cropping, resizing etc) , but those are easily available using either of the following services that  I came across: webresizer.com or aviary.com that provide easy integration APIs.

<!DOCTYPE html>
<html>
	<head>
		<title>Test File Upload </title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./testFile.css"></link>
	</head>
	<body>
		<form method="post" action="" enctype="multipart/form-data">
			<div id="li_photo" class="imageuploader" >
					<label class="description" for="element_photo" class="element_7">Upload a Photo:</label>
					<input id="element_photo" name="element_photo" class="file" type="file" accept ="image/gif,image/jpeg,image/png"/>
					<div id="dropbox">
						<span class="message">Image Preview<br /></span>
					</div>       			
			</div>
			<div class="buttons" >
					<input id="saveForm" class="button_text" type="submit" name="Submit" value="Submit"/>
					<br/><br/>
			</div>
		</form>
		<script type="text/javascript" src="./test.js"></script>
	</body>
</html>

The java script is shown below:

var dropbox = $('#dropbox'),
		message = $('.message', dropbox);
	
	

var template = '<div id="template">'+
						'<span class="imageHolder">'+
							'<img />'+
							'<span></span>'+
						'</span>'+
					'</div>'; 

jQuery('#element_photo').change(
	function() {
		// This starts
		if(this.files!=undefined) {
			createImage(this.files[0]);
		}
		else {
			showMessage('Your Browser does not support HTML5 uploads! Cannot show preview!');
		}
	}
);
	
	
function createImage(file) {

   		var preview = $(template), 
			image = $('img', preview);
			
		var reader;
		try
		{
			reader = new FileReader();
			var max_file_size = 1048576 * 2;
			if (file.size > max_file_size) {
				showMessage('File size is too big, limit under 2MB');
				return;
			}
			if($('#template') !=[]) {
				$('#template').remove();
			}
		} catch (err) {
			showMessage('Your Browser does not support HTML5 uploads! Cannot show preview!');
			return;
		}
			
		
		reader.onload = function(e){
			
			// e.target.result holds the DataURL which
			// can be used as a source of the image:
			
			image.attr('src',e.target.result);
			image.attr('width','192');
			image.attr('height','192');
		};
		
		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);
		
		message.hide();
		preview.appendTo(dropbox);
		
		// Associating a preview container
		// with the file, using jQuery's $.data():
		$.data(file,preview);
}

function showMessage(msg) {
		message.html(msg);
}

The createImage function in the script uses the File Reader API to read the image file which is then displayed on to the page. A working link with the example can be found at fileupload.thechimerical.kodingen.com (Try out kodingen.com for easy prototyping and testing). You can download the actual files from the BOX folder.

The FileReader API is a HTML5 API that does not work on all the browsers (IE9, and Safari 5.1.7 don’t support it yet) while it works like a charm on Chrome and Firefox on both MACs and Windows. One note about Chrome is that the FileReader API will throw a Security exception if you try and test the scripts using this API on a local folder using file:/// access (Mozilla is more lenient).

Online courses galore!

I’ve been busy recently! Rather, I’ve been kept extremely busy with the sudden extraordinary explosion of online courses (all for free!). I know there is tons of information out there on the web, but still having quality professors teach you stuff is quite amazing.

For example, I am currently taking a course on Udacity on Programming a Robotic Car taught by Prof Sebastian Thrun.  The experience has been quite amazing so far. I had taken a similar course during my Graduate School based out of his Probabilistic Robotics book and really enjoyed the class then, but to have him teach it, is quite fantastic.

Previously, most of the course ware offered online were in the form of lecture notes, some videos (MIT OCW site, and some other universities) and limited access to the HWs and tests. However, now all of a sudden, there are multiple high level online courses that are being offered and I am enrolling in all that I can find ( I currently have a heavier load then during some of the semesters I was in school). These courses are all free, with HWs, tests (that have deadlines and grades and almost all material required) and with a completion certificate on passing the course. Of course, you could just attend the course for the knowledge too without worrying about any grades.

While most of the courses are software related (CS101, Programming, Machine Learning, Computer Vision etc),  it seems other topics are also popping up.  MIT has just launched an introductory course on Electrical Design running as a part of their MITx initiative. CalTech is stepping it up further offering live lectures directly from the university.

Though nothing beats hacking around to learn new stuff, some formal classes only open up new things to play with! Here are some of the sites offering free online courses:

Udacity : CS101, Programming Languages, Program a Robotic Car etc

Coursera : offering courses from multiple universities- Machine Learning, Computer Vision, Software As a Service etc

MITx : Circuits and Electronics

iTunes University

scorecards (mysql) on the web!

I love cricket! For those of you unfamiliar with it, its a sport kind of like baseball. I play this local league with 3 teams generally after work and we take it pretty seriously! We like to keep scorecards of the games, store them someplace analyze them incessantly and use them to brag! Up till now these were in paper (impossible to share, maintain and aggregate).

With mobile phones theses days, its become easy to store data electronically. It was quite easy to find an Iphone App (CricMitra) that could be used for scoring and exporting the scorecards in HTML. Initially having scorecards available online was a huge thrill, but it was quickly passed over by the need to aggregate data and see statistics for the season.

This is typically done using databases and that’s where MySql comes in. Storing data in the database allows one to easily mine the data and get various statistics. Without going in details about the schema of my database, the real difficulty comes in using them comes from a) insertion of data (in our case HTML scorecards) and b) hosting this database so that it is easily accessible by webpages online.

There were typically 3 options for a novice in web like me and I tried them all. I list each below:

1) The original solution was to setup a linux server, install LAMP on the server and use this server as the website. The basic idea being to parse the HTML scorecards and store the information in the MySQL database. This database is then accessed using PHP to display contents online. I do believe that this was the best option, and I had everything setup but for the issue of a static IP. Websites, typically have static IPs (you can get around it using dynamic dns with daemon running), but my ISP blocks common ports like 80. So while I had a great website for my home network, it was useless outside!

2) To use a web hosting service. Most Web hosting services provide a LAMP setup available for users. This is really useful in setting up forms on your websites for easy storage in to databases. Here, I ran in to basic issue that the databases on the servers (MySQL) are not remotely accessible. What this means is that the databases do not accept remote connections. So I cannot connect to the database using an SQL client (I recommend Sequel Pro for Mac)  externally. Typically this is a good security design, but for my case where I had code written that parses the exported scorecard (html) and then exports data to a database, access to My SQL remotely was a must.

3) This is when I ran across db4free.net. They offer a free service of hosting MySQL databases online that can be remotely accessed. This is a test server and they do not recommend hosting production level details on the server. But for a small website, where the traffic is fairly limited, this is an ideal solution.

Currently, my database is set up in db4free.net and I have free web hosting using 000webhost. There are simple PHP pages that query the database for information and we have our own league statistics. Pretty cool and easy (provided you know a bit of coding, a bit of databases and a bit of the web).

Check it out at mplrocks.comze.com. I know that the website still needs some design, but the data is pretty cool.

The options I listed out are again in the order I feel are the best. My third option is not ideal and I would like to move to option 2, where I can use the MySQL database provided my 000webhost to store data, but that would require me to write some PHP code that could parse HTML into the database (something I am still working on 🙂 ).