In part 1 of the series, we will go through the steps to implement front-end of the application. Which is building the front-end Resumable.js uploader. And in part 2, we will work on the backend system.
Download link of entire source code is provided in the finale part this series.
So first thing we need to do is to get Bower installed in our development machine. If you are using Mac OS, simply type following command in the Terminal
npm install -g bower
Since Bower requires on Node, NPM and Git. In case it does not work above, make sure those are also installed.
Do not be discouraged if your installation does not go through as easy as expected. We highly recommend that you use Bower in your development workflow, it costs your a bit of time to get it installed, it improves productivity a lot more later on.
For detailed installation of Bower, you can refer to its official site.
Awesome! You have Bower installed, let's see how easy to install Twitter Bootstrap and Resumable.js by using Bower.
Simply type following commands in your terminal from the root of your project fold
bower install bootstrap
bower install resumablejsv
Instead of downloading zip files from those packages' website, extract their source files to the desired location, figure out their dependencies and repeat the same routine to install their dependencies. Bower has done all the work for us.
Check out your project root folder, you should see something similar:
Bower has downloaded all the assets files we need as well its dependency files to the folder bower_components.
We have done all the preparation work, it is time to build the front-end uploader. The reason we call it front-end is because it has the only interface. It does not really work without the backend file handling.
To simulate backend response, we create a PHP file(upload.php) with content below:
<?php return header("HTTP/1.0 200 Ok"); ?>
This script simulates a forever-green upload. Basically it always tells Resumable.js that the file chunk is uploaded successfully. In part 2 of the series, we will get back to make it really work.
Now let's work on the uploader.
Create a file index.html and copy the content below, we will explain it in detail later on.
We have built a Resumble.js uploader, if you have followed along correctly, you should be able to see a uploader similar to below when accessing the index.html page:
Now we have completed the first tutorial. Next tutorial, we are going to build backend part of the uploader. Make sure to sign up our newsletter, so that we can update you once next tutorial is out.
Hopefully this simple tutorial helped you with your development. If you like our post, please follow us on Twitter and help spread the word. We need your support to continue. If you have questions or find our mistakes in above tutorial, do leave a comment below to let us know.