Setting headers and http params for a single request in restangular

Question

I am trying to use restangular for file upload post request , I want to achieve the same functionality as below in restangular. However, I was unsure how to set content type and transformRequest for just this particular request. If I understand correctly, setDefaultHeader sets it for all subsequent requests. Is there some other way?

myApp.service('$fileUpload', ['$http', function ($http) {
   this.uploadFileToUrl = function(file, uploadUrl){
      var filedata = new FormData();
      filedata.append('file', file);
      $http.post(uploadUrl, filedata, {
         transformRequest: angular.identity,
         headers: {'Content-Type': undefined}
      })
      .success(function(){
      })
      .error(function(){
      });
     }
}]);

Answer 1

You have 2 situations here, the POST for create a new item or the PUT to edit an item:

// Save new Item
$scope.saveNew = function (item) {

  var data = new FormData();
  angular.forEach(item, function (fieldData, field) {
    data.append(field, fieldData);
  });

  Restangular
    .all('items')
    .withHttpConfig({transformRequest: angular.identity})
    .post(data, {}, {'Content-Type': undefined})
    .then(function () {
      // do on success
    }, function () {
      // do on failure
    });
};

// Edit existing Item
$scope.save = function (item) {

  var data = new FormData();
  angular.forEach(item.plain(), function (fieldData, field) {
    data.append(field, fieldData);
  });

  Restangular
    .one('items', item._id)
    .withHttpConfig({transformRequest: angular.identity})
    .customPUT(data, undefined, {}, {'Content-Type': undefined})
    .then(function () {
      $location.path('sites');
    });

Answer 2

To set the headers for a single request all you'll need to do is add an object containing the name and value of the headers as an argument to .post(), .get() or whatever method you need.

https://github.com/mgonto/restangular#element-methods

Restangular.all('some-endpoint').post(postContent, {}, {'Content-Type': undefined}).then(function (response) {
    console.log('Weeeeee!!!');
});

As for the transformRequest I am unsure of, I haven't had to deal with anything like that before, this is the only thing I could find on it in the documentation:

https://github.com/mgonto/restangular#setdefaulthttpfields

But that seems to set it for all the request which isn't what you want, but it's something at least.

Anyway, hopefully this will help you get what you want.

Edit:

Since most of the request types in restangular have a query param and then the headers you need to pass in a blank query param object and then the headers, example has been updated to show this.

Answer 3

Since this is the first hit on Google for this issue, see Issue 420 in the Restangular issue tracker.

Basically the newest Restangular has a withHttpConfig function to set $http options right before a request is dispatched.

If you have a route at a URL something like example.com/api/users/:id/picture that accepts a multipart upload with an image for a specific user you could do something like:

Users.one(2)
    .withHttpConfig({transformRequest: angular.identity})
    .customPOST(filedata, 'picture', undefined, {'Content-Type': undefined})
    .then(function(resp) {
        // File data post is complete here
    });

By default Angular will transform any data sent with $http to JSON. The transformRequest configuration simply replaces that default transformation with a NOP.