Async HTML5 File Uploads with Node / Express Framework

File uploads with HTML5 these days is easy as pie, especially when you have a framework that handles everything for you, internally.  Combining Node, the Express framework and a little HTML5 magic with FormData and XMLHttpRequest, we can create a very simple file uploader that can support large files.

The Express framework supports multi-part uploads through its bodyParser middleware which utilizes the node-formidable module internally.



Start off with the client side.


Add the button click event with a bootstrap progress indicator



Add the server route.


Tictail’s trick for easy e-commerce

As I cosily swap mobile numbers with 27-year-old Swede Carl Waldekranz, founder of Tictail, the new e-commerce tool for shops that is sweeping European high streets, I have a strong sense that I am sitting with the next Steve Jobs, Steve Wozniak or Mark Zuckerberg, all internet entrepreneurs who started young and took the world by storm. In two or three years’ time, the boyish Waldekranz could join their ranks as another global icon – and one who will no longer be taking my calls. He certainly seems to be on the brink of something big.

Tictail launched only a year ago – although after long gestation around Waldekranz’s kitchen table in Stockholm – but already it has attracted headlines, backing from noted venture capitalists, and even investment from key personnel at Skype and Spotify. These two major-league web operators see big potential in Tictail’s offer of an internet platform for shopkeepers who want to create an online store to complement their Indoor Positioning System.

“While I was working in an advertising agency in Sweden,” the engaging Waldekranz explains, “I was very drawn to e-commerce. It is the most exciting area, where the message we create and the buying done by consumers converge. Elsewhere, people see the advertising and then, later, go into the shop. In e-commerce it is all one.”

So far, so good, but then he spotted one big obstacle. “Many retailers, particularly smaller ones with indie brands and boutiques, who could benefit from e-commerce, can only do it by spending a lot of money that they can’t afford on constant technical support or having their own IT section.”

 Which is where no-cost, no-frills Tictail steps in. “Back in January,” Waldekranz recalls, “we received an email from a guitar shop in Dublin. It had been in the hands of the same family for 150 years but e-commerce was driving it out of business. They told us, 'We thought that this Christmas would be our last, and that going online was beyond our means and expertise, but within weeks of using Tictail to sell online we are doing so well that we are going to be here for another 150 years.’”
It sounds like a line from a television advertisement – especially to this default technophobe. Doesn’t Tictail require some aptitude for computers, or at the very least access to a willing teenage helper? Waldekranz laughs. “You sound like my mother. She is a brilliant artist but not great with technology and so she hasn’t been able to sell the ceramics she makes online. I told her that is absurd.” And he immediately opens up on his ever-present laptop the “By Mutti” website to display ceramicist Eva Gernandt’s distinctive porcelain designs, plus those handy boxes where you can click to buy one.

“It became our benchmark when we were planning Tictail,” Waldekranz says with one of those toothy smiles that stretches across his face. “If my mother couldn’t set it up and operate it on her own, then we hadn’t got it right.”

And since she clearly can and is profiting by it, this must count as a case of mission accomplished. Which brings us neatly to Tictail’s mission statement. It wants not only to be the world’s most used e-commerce platform, but also its most loved. E-commerce and the Hands free access of shops can suddenly be friends, not foes, and Britain’s stand-alone high-street retailers can more easily get a share of the UK’s £78 billion online sales market.

So if Waldekranz’s mother was instinctively hostile to using the internet to promote her business, I can’t help wondering, where does her son get his can-do attitude from? “Oh, my dad. He was always buying the latest bit of technology, even though he couldn’t work them.” And, he adds, then there was also what sounds like a very different approach to technology in the classrooms of Sweden.

“I’m not a digital native,” says Waldekranz, “like children in Swedish schools today. I only got my first computer when I was 11. But there is also a spirit in Sweden that we know we are a small country of nine million people, and that anything we develop can never be sustained if the only market we envisage is Sweden. We have to think global from day one. That mindset is part of our culture.” As evidenced by the success of Skype and Spotify, both now worldwide brands with their roots in Sweden.

Waldekranz is the public face of Tictail but is always careful to stress he is one of four founders, anxious perhaps to avoid future disputes such as those that engulfed Zuckerberg and his early Facebook collaborators. “In Sweden,” he says, “we prefer flat hierarchies.”

So I can see how Tictail could benefit smaller, independent high-street retailers and sole traders in all sorts of other fields – like Waldekranz’s mother – but since this is a business not a charity, how does he make any money?

“Well, businesses getting started on Tictail is good,” he says, “but it is not enough if they are going to succeed. The important question then is what happens next? How do you get traffic to your website? How do you handle your first sales? How often do you keep refreshing your site? How do you use social media to encourage people to take a look at what you are offering? How do you seek feedback? And that is where we offer Tictail feeds. These applications help you tackle all these issues.” And for these there is a charge.

The “feed” is essentially a stream of messages that acts as an automated adviser, prompting and occasionally cajoling shop owners not to rest on their laurels. The idea is both to offer as good a service online as off, and to build loyalty and repeat custom, using social media features such as newsletters and alerts about new products. New plans include allowing users to add extensions, such as the ability to hand out discount codes to their store.

So Tictail is definitely a business, with a bottom line, but what gives Waldekranz that added edge of persuasion is his vocal attachment not just to being profitable but also to the democratic ideals of the world wide web. So he compares the rise of Tictail in relation to the major retailers as akin to that of the blog in recent years. “It wasn’t that long ago that the big media outlets controlled most of the written content on the web, but now that has changed. Anyone can write a blog and go mainstream. It can be the same with e-commerce. Right now the big giants are controlling it, but my belief is that we can now offer a way for small, independent retailers on the high street to take them on. It is a major shift.”

Basic CKEditor 4 Image Uploader with Express and NodeJS



I recently found an interesting article on a simple hack to get the existing image upload feature in CKEditor 3 enabled and functioning with a PHP server.  I took his idea and applied it to the latest version, which is currently 4 with a NodeJS and Express framework backend.

It basically requires editing two files inside the ckeditor sdk:  image.js and config.js.

Edit ckeditor/plugins/image/dialogs/image.js and look for "editor.config.filebrowserImageBrowseLinkUrl" around line 975.  A few lines below will be "hidden: true".  Change this to "hidden: false".  Further down is another "hidden: true" near "id: 'Upload'", which needs to be changed to "hidden: false".  Once you are done with the changes, image.js should look like this.

Next, we need to edit the config.js file to point to where the upload POST route is.  Edit ckeditor/config.js and add config.filebrowserUploadUrl = '/upload'



Next, we need to create our Express POST route to handle the upload.  I am taking the temp file name and prepending it to the actual file name and saving it under ./public/uploads.  Since public is a default static route in Express, any uploaded image will be immediately available in the CKEditor UI.  The important part here is to return a script block, instructing CKEditor to take the new image.






Finally, route it through express:

var fn = require("./upload.js");
app.post("/upload", fn);

AWS Coffee-Script Web Stack - Part 1: The Development Stack

AWS Coffee-Script Web Stack - Part 1: The Development Stack


Welcome to a multi-part series on setting up an Amazon Web Service Coffee-Script Web Server using NodeJS and the Express framework.

Part 1 of this series consists of building up the server components in a nice stack on top of ubuntu linux.  By the end of this blog entry, you will have a basic personal website with the twitter bootstrap look and feel.  We will then expand on its capabilities and features as I write more posts on the series.  Some of these posts will include: adding connect-assets which allows you to include compiled coffee-script into the rendered templates, session management with redis-server for persistent session state across server reboots using oAuth providers such as google, combining sessions with socket.io for seamless authentication validation, and simple M(odel) V(iew) C(ontroller) structure with classical inheritance design.

The stack will consist of three main NodeJS components: node modules, server code, and client code.  It will run on two environments:  Internet facing AWS running Ubuntu Server 12.04 and a development environment consisting of Ubuntu Desktop 13.04 with JetBrains Webstorm 6 Integrated Development Environment (IDE).  The code will be stored in a git repository which we use to keep a history of all our changes.



Setup Development Environment

So, lets get going and setup our development environment.  First, download the latest Ubuntu Linux Desktop, currently 13.04.  While you wait for the ISO, go ahead and start building the Virtual Machine instance.  The following screens relate to my Virtual Host based on VMWare Fusion 5.



Virtual Hardware
The minimum to get going smoothly is pretty lightweight compared to other environments such as Microsoft's SharePoint 2013 which requires a good 24GB of ram for a single development environment.  This virtual machine should have at least 2 vCPU and 2GB RAM.  Depending on how big your project gets (how many files Webstorm needs to keep an eye on), you might need to bump up to 4GB of RAM





OS Volume
For OS volume, 20GB should suffice.  If you plan on making upload projects, then provision more storage.






Virtual Machine Network Adapter

I prefer to keep the virtual machine as its own entity on the network.  This clears up any issues related to NATing ports and gives our environment the most realistic production feel.










Install Ubuntu OS From Media

Boot up the virtual machine and Install ubuntu.



Update OS 

I prefer to keep my linux machines patched.

$ sudo apt-get update
$ sudo apt-get upgrade

Install Dependencies

Before we can really get going with Webstorm, we need to get vmware-tools installed for all that full screen resolution glory.  Once installed, we need to pick up g++.

$ sudo apt-get install g++

Now that we have our Ubuntu Linux Desktop 13.04 development environment setup, install nodejs, and also install our global node modules/binaries.

Install git, setup bare repository, use /opt for development

$ sudo apt-get install git
$ sudo mkdir /git
$ sudo mkdir /opt
$ sudo chown <username> /opt

$ sudo chown <username> /git

$ mkdir /git/myFirstWebServer.git
$ cd /git/myFirstWebServer.git
$ git --bare init

Install Node v0.10.15 (latest)
$ wget http://nodejs.org/dist/v0.10.15/node-v0.10.15.tar.gz

$ tar zxvf node-v0.10.15.tar.gz
$ cd node-v0.10.15
$ ./configure
$ make
$ sudo make install

Install global node modules and their binaries

$ sudo npm install -g coffee-script express bower

Creating our basic Express Web Server


I prefer to keep all my custom code inside /opt, so we will setup our Express web server there.  Set permissions as necessary.  We will also initialize git at this time.

$ cd /opt
$ express -s myFirstWebserver
$ cd myFirstWebserver
$ git init
$ npm install

Great.  Now that we have our basic Express Web Server, we can run it with 'node app.js' and visit it by going to http://localhost:3000 using a web browser.

Next, we want to convert all of our assets to coffee.  Use an existing js2coffee converter, such as http://js2coffee.org.  Convert and clean up your js files into coffee.

Your app.coffee code could look something like this:


Configuring bower and components

We will use bower to install client libraries.  Its like npm, and helps streamline deployments.   For our particular configuration, we choose the project folder's pubilc directory to store components since its already routed through express.
Configure bower (docs)

edit /home/<username>/.bowerrc:



Now that we have our basic rc setup for bower, we need to specify our client library dependencies in our project.

edit /opt/myFirstWebsite/component.json

Bower is completely setup and ready to install packages.

$ cd /opt/myFirstWebsite
$ bower install

Now that we have our client libraries, lets add references to them in the website's layout.
edit ./views/layout.jade:





Commit the changes and push to the code repository

Before we commit our changes, we need to setup a .gitignore file so we dont blast the code repository with stuff bower and npm deal with.  
edit /opt/myFirstWebsite/.gitignore


Now that we have successfully created a starter bootstrap enabled website, its time to commit our changes and push them to our source repository.  First, we will setup the repository origin.

$ cd /opt/myFirstWebsite 
$ git remote add origin /git/myFirstWebsite.git

Next, we will commit the changes to origin: 
$ git add .
$ git commit -a
$ git push -u origin master