Uploading images is a pain all around. On the client there is input type='file' but it looks terrible and can be difficult to style without additional plugins. Additionally you need to submit form using multipart -- whatever that is. On the server it is no better. Hosting images can be expensive for your database and your bank account. Setting up AWS S3 buckets and reference urls within your database is one solution, but time consuming, especially if you are unfamiliar with AWS. All you want to do is allow users to upload a profile picture! Enter Filestack, formerly named Filepicker.io.

tl;dr source code on github.

Get started

We are going to build this tutorial using the wildly popular MEAN stack, standing for MongoDB, Express (a web server), Angular.js (frontend framework) and Node.js (scripting language ie the javascripts).

I have built a repo that acts as a starter template for MEAN apps. Clone that to get started with a new project.

$ git clone git@github.com:cleechtech/mean-starter.git
$ cd mean-starter
$ npm install
$ node server

Next sign up for a free filestack account. One special point is that the free tier only supports 250 file uploads. After that the service costs $99 per month. This is not ideal but if you are quickly trying to make a MVP work 250 is plenty of files!

Add the filestack javascript library to your project. We can add it via cdn:
<script type="text/javascript" src="//api.filestackapi.com/filestack.js"></script>

Or install it with bower: $ bower install filepicker-js --save

Either way reference the library in public/index.html.

Configure Angular.js

Since we are working with angular, we can use the angular-filepicker module the good people at filestack/filepicker (remember they recently changed their name) provide for us. Install that with bower:

$ bower install angular-filepicker --save

Add the script tag to public/index.html (after angular.js!):

<script src="bower_components/angular-filepicker/dist/angular_filepicker.js"></script>

and then declare the module as a dependency in public/js/app.js:

var app = angular.module('mean-boilerplate', [
    'ui.router',
    'angular-filepicker'
]);

In the same file configure your api key:

app.config(function($stateProvider, $urlRouterProvider, filepickerProvider){
    $stateProvider
        .state('home', {
            url: "/",
            templateUrl: "templates/home.html",
            controller: 'HomeCtrl'
        });

    $urlRouterProvider.otherwise("/");

    filepickerProvider.setKey('<YOUR_API_KEY_HERE>');
});

Create the file uploader

In the main html template use the filepicker directive to create a "Pick File" button, styled with bootstrap:

<div class='jumbotron text-center'>
    <h1>Welcome to Filestack starter</h1>

    <input filepicker type="filepicker" data-fp-services="computer,facebook,webcam,box" on-success="onSuccess(event.fpfile)" data-fp-button-class="btn btn-success" />

</div>

Then define the files array and the on success method in the main controller:

app.controller('HomeCtrl', function($scope){
    $scope.files = [];

    $scope.onSuccess = function (Blob){
        console.log(Blob);
        $scope.files.push(Blob);  
        $scope.$apply();      
    };

});

Finally we can render the file we upload to the main screen:

<div class='row'>
    <div class='col-sm-12'>
        <h3>Uploaded images</h3>
        <div class='row' ng-repeat='file in files'>
            <img ng-src='{{file.url}}' />
        </div>
    </div>
</div>
<div class='row'>
    <div class='col-sm-12'>
        <h3>Raw data</h3>
        <pre>{{files | json}}</pre>
    </div>
</div>

Once we have the url, hosted by filepicker we can save it to localStorage or our own database. There are tons of other options with Filestack/Filepicker. This tutorial only scratches the surface of what you can do!

If you have questions make an issue on the source code.