AngularJS File Upload is a module for the AngularJS framework.

Added by: Sam Deering





Stars: 42

Watchers: 42

Forks: 11

Module Description

Gem Version

AngularJS File Upload

A gem that uses angular-file-upload as an asset in the Rails Asset Pipeline.


Add this line to your application's Gemfile:

gem 'angularjs-file-upload-rails', '~> 1.1.6'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install angularjs-file-upload


Include it in your JavaScript manifest (e.g. application.js)

//= require angularjs-file-upload

* be sure that angular is required before angularjs-file-upload

Read more

read more about the options in angular-file-upload-wiki

Basic example

* *assuming that you have setup an angularjs correctly in your rails app

  gem 'angularjs-file-upload-rails', '~> 1.1.6'
  gem 'carrierwave'
  gem 'rails', '4.1.5'

Setup your carrierwave gem as discribed in the carrierwave-readme

add angularjs-file-upload-rails to your gem file add

//= require angularjs-file-upload

to application.js

in the angular file

    .module('app', ['angularFileUpload'])
    .controller('AppController', function($scope, FileUploader) {
        $scope.uploader = new FileUploader({url: '<your controller path>'});

in your view

<div ng-app="app">
    <div ng-controller="AppController">
        <input type="file" nv-file-select uploader="uploader"/><br/>

in your controller

class UsersController < ApplicationController

  def create
    user =
    //other params
    user.picture = params[:file]



  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -m 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Module stats last updated: 2017-11-13 15:00:11

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!