A common component in web applications is the form <input type="file">. To connect this input any kind of logic or just render a preview of the selected files tends to be a hassle involving a POST to some server-side code. For some cases it would be a lot easier containing parts of this on the client-side.

After implementing this for various angular projects a pretty useful directive started to emerge.

Usage

angular.module('myApp', ['file']);

<!-- Bind the values to $scope.files -->
<input type="file"
  file="files"
  accept="image/*"
  multiple>

<!-- Render the selected files directly in the view -->
<div ng-repeat="file in files">
  <h4>{{ file.name }}</h4>
  <img alt="{{ file.name }}"
    ng-src="data:{{ file.type }};base64,{{ file.body }}">
</div>

Example

• Select Files One File Selected {{ files.length }} Files Selected
  Clear Files

• {{ file.name }}

How it works

• Listen for change in input element.
  • For each targeted file:
    1. Read the file as text or binary string.
    2. Base64 encode body if file type is binary string.
    3. Compile type, name & body.
    4. Apply new values to $scope when last file is done.

Installation

Install with Bower:

$ bower install angular-file-directive

Include from a RawGit’s CDN:

<script src="//cdn.rawgit.com/vpegado/angular-file-directive/v1.2.1/file.js"></script>

Or download manually.

The code

Please check it out on GitHub and submit any issues encountered.

For most of my projects I use Git as source control and store them on GitHub. They offer a service called Github Pages where you can host static pages. There you have a static page generator tool called Jekyll out of the box witch takes care of the most boring parts and a CDN in front for better hosting performance. You can do this a number of ways and here here is one.

Get started

1. Get an account on GitHub.

2. Create a new repository called username.github.io. Don’t forget to replace username with your own GitHub username in all of the examples.

3. Open up the terminal

$ gem install jekyll
# Installs jekyll
$ jekyll new username.github.io
# Generates boilerplate
$ cd username.github.io
$ git init
# Sets up the Git files
$ git add -A
$ git commit -m 'first commit'
$ git remote add origin https://github.com/username/username.github.io.git
# Pointing it at your GitHub repository
$ git push origin master
# Sends your changes to GitHub

1. Go to http://username.github.io/ and take a look at the result.

Configuration

Edit _config.yml file to your own liking. Check Jekyll Configuration to see what is avalible.

Local preview

Go to the root of your project and run

$ jekyll server --watch
Configuration file: /project/_config.yml
            Source: /project
       Destination: /project/_site
      Generating...
                    done.
 Auto-regeneration: enabled for '/project'
Configuration file: /project/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

Go to http://127.0.0.1:4000/ to preview your changes.