Send file using PUT method Angularjs

Question

I am using angularjs. I have created a file upload function using angularjs with laravel. The file upload with FormData is working fine. But when I try to send file through PUT method there is no response from the server side.

I have gone through the following answers. Uploading a file with jquery and sending as a PUT and How to upload a file using an HTTP "PUT" using JQuery? but I cannot able to find solution.

Here is my code.

<input type="file" ng-file-model = "formData.files" multiple>

The directive for my code

app.directive('ngFileModel', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var model = $parse(attrs.ngFileModel);
        var isMultiple = attrs.multiple;
        var modelSetter = model.assign;
        element.bind('change', function () {
            var values = [];
            angular.forEach(element[0].files, function (item) {
                var value = item;
                values.push(value);
            });
            scope.$apply(function () {
                if (isMultiple) {
                    modelSetter(scope, values);
                } else {
                    modelSetter(scope, values[0]);
                }
            });
        });
      }
    };
}]);

Here is my function which converts my form data into FormData

constructFormData : function( data ) {
  var fd = new FormData();
  for (var key in data) {
    var value = data[key];
    angular.forEach(data, function (file, i) {
      fd.append('files['+i+']', file);
    });
  }
  return fd;
},

Here is my Controller

var formData = GeneralService.constructFormData($scope.formData);
FileService.update( formData )
  .success(function( data ){
      if(data.status == 403) {
        $location.path('/403');
      }
      if(data.success) {
          console.log(data);
      } else {
        ValidationService.showValidationErrors(data.errors);
      }
  });

Here is my service

update : function(formData) {
  return $http({
        method: 'PUT',
        url: $rootScope.baseurl +'/files',
        data: formData,
        dataType: 'json',
        headers: {'Content-Type': undefined}
    });
},

The Server side (laravel)

routes.php

Route::put('/files', ['uses' => 'FilesController@update']);

FilesController

public function update(Request $request) {
  $data = $request->all();
  print_r($data);
}

the above print_r function displays nothing.

I am get the posted data using print_r($request->all());, It gives empty data. I don't know where I make mistake. If I am asking this question by wrong please apologize.

What is your backend controller expecting? Do you have a web method that is expecting `PUT` or `POST`? — Kyle, May 09 '16 at 13:16
Does your server have an endpoint expecting `PUT`? What does that look like? — Kyle, May 09 '16 at 13:23
Where are you specifying method type for the route on server ? You only added the function. IE : https://laravel.com/docs/5.2/routing Also you should use `return` not `print_r` — Pogrindis, May 09 '16 at 13:28
So now try `return response()->json($data);` in your function. — Pogrindis, May 09 '16 at 13:31
The problem is I cannot able to get the file data. You are given response details. I need to upload file using put method. — Praveen Srinivasan, May 09 '16 at 13:32
I have tried that too. I am not getting any response. I am getting empty data. — Praveen Srinivasan, May 09 '16 at 13:36
Hmm, i would take a look into this http://stackoverflow.com/a/22515383/1606432 — Pogrindis, May 09 '16 at 13:37
Understand my query. Actually when I try to send using `post` method it will works perfect. But I need to send data by `put` method. — Praveen Srinivasan, May 09 '16 at 13:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111441/discussion-between-praveen-srinivasan-and-pogrindis). — Praveen Srinivasan, May 09 '16 at 13:52
This is a PHP core issue: https://stackoverflow.com/a/55725521/1072492 — Dan, May 08 '19 at 12:13

score 1 · Answer 1 · answered Oct 01 '18 at 18:58

1

I have the same issue and finally i found this code

var formData = new FormData();
angular.forEach($scope.data, function (value, key) {
    formData.set(key, value);
});

$http.post(uploadUrl, formData, {
    transformRequest: angular.identity,
    headers         : {'Content-Type': undefined}
});

answered Oct 01 '18 at 18:58

Farhad Mohammadi

41
7

This is using `post` not `put`. – Dan Apr 17 '19 at 07:56
@Dan you can use put instead of post function, the $http has put method also – Farhad Mohammadi May 08 '19 at 11:48
This question is about using `PUT`, which you cannot do, it's a PHP core issue: https://stackoverflow.com/a/55725521/1072492 – Dan May 08 '19 at 12:12

Send file using PUT method Angularjs

1 Answers1

Linked