Przesyłanie pliku Paperclip AngularJS/Rails

Question

Próbuję zaimplementować przesyłanie plików za pomocą AngularJS/Rails przy użyciu klejnotu Paperclip. Rozwiązuję problem z wprowadzaniem pliku za pomocą dyrektywy. Teraz chcę wysłać obraz z innymi danymi postu, ale dane obrazu nie są wysyłane.

HTML:

<form name="PostForm" ng-submit="submit()" novalidate> 
    <input type="text" ng-model="post.title"> 
    <input type="file" file-upload /> 
    <textarea ng-model="post.content"></textarea> 
</form> 

Mój kontroler:

$scope.create = function() { 

    function success(response) { 
     console.log("Success", response) 
     $location.path("posts"); 
    } 

    function failure(response) { 
     console.log("Failure", response); 
    } 

    if ($routeParams.id) 
     Post.update($scope.post, success, failure); 
    else 
     Post.create($scope.post, success, failure); 
    } 

$scope.$on("fileSelected", function (event, args) { 
    $scope.$apply(function() { 
     $scope.post.image = args.file; 
    }); 

Mój model:

class Post < ActiveRecord::Base 
    attr_accessible :content, :title, :image_file_name, :image_content_type, :image_file_size, :image_updated_at 

    belongs_to :user 
    has_attached_file :image, :styles => { :medium => "300x300>", :thumb => "100x100>" }, :default_url => "/images/:style/missing.png" 
end 

Ale kiedy wysłać go na stronie serwera, żądanie jest tak:

{ 
    "content":"Hey", 
    "created_at":"2013-08-31T17:54:32Z", 
    "id":17, 
    "image_content_type":null, 
    "image_file_name":null, 
    "image_file_size":null, 
    "image_updated_at":null, 
    "title":"Image", 
    "updated_at":"2013-08-31T17:54:32Z", 
    "user_id":4 
} 

W związku z tym żadne dane dotyczące zachowania obrazu nie są wysyłane na serwer, żadne wskazówki, jak to zrobić?

Answer 1

ja postęp teraz uda mi się przesłać dane do plików poprzez zawartość typu form-data, problem jest teraz w kontroler szyny, błąd jest uruchomiona:

undefined method `stingify_keys` 

Oto kod używać do wysłać dane:

$http({ 
     method: 'POST', 
     url: url, 
     headers: { 'Content-Type': false }, 
     transformRequest: function (data) { 
      var formData = new FormData(); 
      formData.append("post", angular.toJson(data.post)); 
      formData.append("image", data.image); 
      return (formData); 
     }, 
     data: { post: $scope.post, image: $scope.image} 
    }). 
success(function (data, status, headers, config) { 
    alert("success!"); 
}). 
error(function (data, status, headers, config) { 
    alert("failed!"); 
}); 

i to dane, które są wysyłane do szyn:

-----------------------------2122519893511 
Content-Disposition: form-data; name="post" {"title":"sdsdsd","content":"sdsd"} 
-----------------------------2122519893511 
Content-Disposition: form-data; name="image"; filename="dad.jpg" Content-Type: image/jpeg [image-data] 
-----------------------------2122519893511--