Download a file without server request

2014 · 8 · 1

We have come across Download file link(button) in lot of sites. Generally, When you click download link or button, it sends GET request to server and server returns the downloadable content(with content-disposition header). Now-a-days we are building lot of Single Page application where we get the JSON payload from the server and render it in the client side. Since we have the data in the client side, we don't want to sent another request to download the content. So we will see how to download the content from the client side without an extra request to server.

How existing download from server works

Whenever you click the download link, it will send GET request. The server will set Content-disposition header to attachment; filename=some-filename.csv and set the data in the body.

Sample code from Node.js to download CSV file

http.createServer(function(request, response) {
    response.setHeader('Content-disposition', 'attachment; filename=some-filename.csv');
    response.writeHead(200, {
        'Content-Type': 'text/csv'
    });

    csv().from(data).to(response)

})
.listen(3000);

Download content without server request

This can be done by two ways.

  1. Using Data URL
  2. Using Downloadify library

Using Data URI

The data should be placed in the href attribute with data url format. You can also set the filename in the download attribute.

<a href="data:text/plain,this is some text" download="some-filename.txt" target="_blank">Download<a>

Caution: The data url is not supported across all browser/version combinations.

Using Downloadify

Downloadify is a tiny javascript + Flash library that enables the creation and download of text files without server interaction. It works even in IE. It is much better than previous one.

Usage:

// Any JavaScript framework:
Downloadify.create( id_or_DOM_element, options );

// With Jquery
$("#element").downloadify( options );

HTML

<head>
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript" src="js/downloadify.min.js"></script>
</head>
<body onload="load();">
  <form>
    <input type="text" name="filename" value="testfile.txt" id="filename" />
    <textarea cols="60" rows="10" name="data" id="data">
        Whatever you put in this text box will be downloaded and saved in the file. If you leave it blank, no file will be downloaded
    </textarea>
    <p id="downloadify">
      You must have Flash 10 installed to download this file.
    </p>
  </form>
</body>

Javascript

function load(){
      Downloadify.create('downloadify',{
        filename: function(){
          return document.getElementById('filename').value;
        },
        data: function(){
          return document.getElementById('data').value;
        },
        onComplete: function(){ alert('Your File Has Been Saved!'); },
        onCancel: function(){ alert('You have cancelled the saving of this file.'); },
        onError: function(){ alert('You must put something in the File Contents or there will be nothing to save!'); },
        swf: 'media/downloadify.swf',
        downloadImage: 'images/download.png',
        width: 100,
        height: 30,
        transparent: true,
        append: false
      });
    }

A very simple demo is available that lets you supply your own content and filename and test out saving, canceling, and the error functionality when the file is blank.

Please check Downloadify Readme for more information. Share your thoughts and suggestions in the comment. Have a nice day.

View comments

Free Static Page Hosting on Google App Engine in a 5 minutes

2014 · 2 · 17

Now-a-days we have a lot of options to deploy our applications. Some of them are Google App Engine, Google Compute Cloud, Amazon EC2, Heroku, Nodejitsu and much more. All the services have their advantages and disadvantages over others. Generally, we do not prefer much complex infrastructure or steps to deploy our static pages. Recently, I found that Google App engine has been a best platform for hosting our static web pages with decent free plan over other services. In this article, we will discuss a steps to host your static pages which can be personal blog, company site or even your client sites.

Create an application in Google App Engine

Visit Google App Engine and then create an application. When creating App engine application, the application id is very important. Because it acts as subdomain for your site. Lets say, application id is coolmoon, the site will be in coolmoon.appspot.com.

Install App Engine SDK for python

Since python has been a best supported language in App Engine, Download and Install App Engine SDK for python. Are you not a python developer(like me)? Do not worry, you do not need to write a single piece of python code.

You will use two commands from the SDK:

dev_appserver.py  -  the development web server
appcfg.py  -  for uploading your app to App Engine

Create an application folder

You have to create an application folder which has static files and configuration file to be deployed. The structure of the folder may be as follows

application_folder/
  - app.yaml              # configuration file. we will see in next section
  - public/               # public folder will contain static files
    - index.html
    - js/
    - css/
    - img/

Content of App Engine configuration(app.yaml)

  application: coolmoon
  version: 1
  runtime: python27
  api_version: 1
  threadsafe: yes

  handlers:

  - url: /(.+)
    static_files: public/\1
    upload: public/(.*)

  - url: /
    static_files: public/index.html
    upload: public/index.html

  skip_files:
  - ^(.*/)?app\.yaml
  - ^(.*/)?app\.yml
  - ^(.*/)?#.*#
  - ^(.*/)?.*~
  - ^(.*/)?.*\.py[co]
  - ^(.*/)?.*/RCS/.*
  - ^(.*/)?\..*
  - ^(.*/)?tests$
  - ^(.*/)?test$
  - ^test/(.*/)?
  - ^COPYING.LESSER
  - ^README\..*
  - \.gitignore
  - ^\.git/.*
  - \.*\.lint$
  - ^fabfile\.py
  - ^testrunner\.py
  - ^grunt\.js
  - ^node_modules/(.*/)?

Test static pages

You can run development server locally and check your static pages by following command

 dev_appserver.py ./

Visit http://localhost:8080 to test your pages.

Deploy

Everything is perfect and deploy the static pages. The command appcfg.py is used for deploy the application to Google App engine

appcfg.py update .

It will ask for email and password of your Google account. The password must be application specific password. To know how to generate application specific password, please refer Application specific password.

You've made it

Finally you got your site hosted in <application-id>.appspot.com. Static hosting is super easy with App Engine. Moreover it is faster than other static hosting services. Because it runs on Google infrastructure.

Extra: Offer from SiteGround

You can get SiteGround Coupon and try out awesome web hosting solutions SiteGround.

Happy static hosting and Have a nice day.

View comments

Dropbox will save your head

2013 · 11 · 4

Recently My Mac OSX has been crashed and I cannot retrieve some of my data from hard drive. Fortunately I have already synced important folders to the Dropbox that saves my head.

Few days ago, I saw the tweet from popular GitHub contributor tj (Creator of ExpressJs, Jade, Mocha)

I am really sad about it. It can happen to anyone. So, whenever you started working on project(Pre-Github), You should consider sync to the Dropbox. Moreover it is always better and safer to sync important folder and files. It can be simply done by creating symbolic link to the folder in the Dropbox.

Open terminal and do the following

## Go to dropbox folder. It can be any dropbox folder
cd ~/Dropbox/MacOSX

# Create symbolic link to Stickies database
ln -sf ~/Library/StickiesDatabase .

# Create symbolic link to Sublime text User data
ln -sf ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User Sublime3-User

In symbolic link creation, you can use .(dot) in the last argument to use same folder or file name as original. Otherwise you can specify the name that you wanted to have in your Dropbox.

Have a nice day.

View comments