title: How to upload images to S3 using rails, angular & paperclip
body: <p>I am new to Angular-Rails and I would like to create a form that has an image attachment that gets uploaded to AWS S3. I successfully uploaded images using traditional method (normal forms and paperclip gem).</p>
  
  <p>So hopefully someone can shine some light on my problem.</p>
  
  <p>Here is my rails controller:</p>
  
  <pre><code>class ProjectsController &lt; ApplicationController
    before_action :set_project, only: [:show, :edit, :update, :destroy]
  
    # GET /projects
    # GET /projects.json
    def index
      render json: Project.all
    end
  
    # POST /projects
    # POST /projects.json
    def create
  
      @project = Project.new(project_params)
      if @project.save
        render json: @project
      else
        render json: @project.errors
      end
    end
  
    private
      # Use callbacks to share common setup or constraints between actions.
      def set_project
        @project = Project.find(params[:id])
      end
  
      # Never trust parameters from the scary internet, only allow the white list through.
      def project_params
        params.require(:project).permit(:name, :description, :image)
      end
  end
  </code></pre>
  
  <p>Here is my angular controller:</p>
  
  <pre><code>app.controller('HomeCtrl', ['$scope','Upload',function($scope, Upload){
  
    // upload later on form submit or something similar
    $scope.submit = function() {
      if ($scope.form.file.$valid &amp;&amp; $scope.file) {
        $scope.upload($scope.file);
      }
    };
  
    // upload on file select or drop
    $scope.upload = function (file) {
      Upload.upload({
          url: '/projects',
          data: {file: file, 'project[name]': $scope.name, 'project[description]': $scope.description},
      }).then(function (resp) {
          console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
  
      }, function (resp) {
          console.log('Error status: ' + resp.status);
      }, function (evt) {
          var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
          console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
      });
    };
  
  }]);
  </code></pre>
  
  <p>Here is my angular view:</p>
  
  <pre><code>&lt;form name="form"&gt;
    &lt;input type="text" ng-model="name"&gt;&lt;br /&gt;
    &lt;input type="text" ng-model="description"&gt;&lt;br /&gt;
  
    &lt;div class="button" ngf-select ng-model="image" name="image" ngf-pattern="'image/*'"
        ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
        ngf-resize="{width: 100, height: 100}"&gt;Select&lt;/div&gt;&lt;br /&gt;
  
    &lt;button type="submit" ng-click="submit()"&gt;submit&lt;/button&gt;
  
   &lt;/form&gt;
  </code></pre>
  
  <p>And this is what I get back:
  <a href="http://i.stack.imgur.com/28YP8.png" rel="nofollow">image of what project returns</a></p>