Angularjs file upload in put method not working

Question

I have a simple todos application in which i am trying to upload a photo along with a single todo. Now i have created this factory function that takes care of the creation of the todo

  todosFactory.insertTodo = function(todo){
    return $http.post(baseUrl, todo, {
      headers: {
        'Content-Type' : undefined
      },
      transformRequest: function(data, headersGetter){
        var formData = new FormData();
        angular.forEach(data, function (value, key) {
            formData.append(key, value);
        });
        return formData;
      }
    });
  };

And the factory update method looks like this

  todosFactory.updateTodo = function(id, todo){
    return $http.put(baseUrl + '/' + id, todo, {
      headers: {
        'Content-Type' : undefined
      },
      transformRequest: function(data, headersGetter){
        var formData = new FormData();
        angular.forEach(data, function (value, key) {
            formData.append(key, value);
        });
        return formData;
      }
    });
  };

The insertTodo is working as expected but the updateTodo is not posting data to the server. I am using laravel for the API and the update API endpoint has this code

dd(Input::all(), Input::file('cover_photo'));

This shows that noting was posted in the request. And if i change the put to post in the updateTodo factory method it starts working. Am i missing some extra headers or something ?

Update

If i remove both the transformRequest and headers form the updateTodo method, the text data is successfully received on the server but the the file doesn’t.
And if i just remove the headers nothing gets posted

Update

I am using the PHP server that comes with laravel using this command

php artisan serve

Update

Thanks to @Ricardo's answer i was able to get the submitted data using this code

router->put('/todos/{id}', function($id){
    $stream = file_get_contents("php://input");
    echo $stream;
    die();
});

I am getting the stream in this format

-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="id"

5
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="name"

Image Todo
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="complete"

0
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="created_at"

2015-10-02 06:28:10
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="updated_at"

2015-10-02 06:28:10
-----------------------------3643739756006088191021064137
Content-Disposition: form-data; name="cover_photo"; filename="Dragon-Falls-Venezuela-5.jpg"
Content-Type: image/jpeg

�����JFIF��H�H������Exif��MM�*�����i������������������z���,����UNICODE��C�R�E�A�T�O�R�:� 
�g�d�-�j�p�e�g� �v�1�.�0� �(�u�s�i�n�g� �I�J�G� �J�P�E�G� �v�6�2�)�,� �q�u�a�l�i�t�y� �=� �9�0�

Now i need to parse this raw format. I have found two php methods that other people have suggested http://php.net/manual/en/function.mb-parse-str.php and http://php.net/manual/en/function.parse-str.php but both of them are not working properly and do not give an array like $_GET or $_POST.

Did you define a request mapping for PUT on the server side? — Michael, Oct 02 '15 at 08:39
Yes i did $router->put('/todos/{id}', function($id){ $data = Input::all(); $cover = Input::file('cover_photo'); dd($data, $cover); }); — Sajjad Ashraf, Oct 02 '15 at 10:04
If you switch it to a post can you check if the body is coming through? Also remove your transformRequest, let's just get it posting first. — Mathew Berg, Oct 06 '15 at 15:47
I used https://github.com/nervgh/angular-file-upload and it worked with PUT ;) — Betty St, Oct 06 '15 at 20:10
It starts working when i switched it to post instead of put @MathewBerg — Sajjad Ashraf, Oct 07 '15 at 01:34
Even if you left the transformRequest? (i.e. post but with transformRequest still) — Mathew Berg, Oct 07 '15 at 12:53
i met same problem which turns out nginx conf error,maybe you should check it too. — Raymond Cheng, Oct 08 '15 at 05:48
@RayCheng i am using the php server that comes with laravel using this command `php artisan serve` , and what configuration option you changed to make it work ? — Sajjad Ashraf, Oct 08 '15 at 05:56
@SajjadAshraf use nginx must let server support PUT method.not sure laravel server — Raymond Cheng, Oct 08 '15 at 06:53
@SajjadAshraf I have edited my answer with information that can help taking into account the edit you have made. — Ricardo Velhote, Oct 14 '15 at 09:21

score 1 · Answer 1 · edited May 23 '17 at 12:07

This piece from the PHP documentation discusses the PUT method and file uploads (multipart/form-data).

I can't quote any parts from it because I think everything is important. You should read it in detail but to summarize it's not possible without changes to your Apache configuration and creation of auxiliary scripts.

With Laravel you should use Form Method Spoofing (basically a variable called _method) and keep on using POST. The _method will allow you to call Laravel's PUT action correctly.

Edit

AngularJS, by default, sends data in the JSON format which explains why you cannot access the data with the $_POST global. I have answered this in another question which explains what you have to do.

score 0 · Answer 2 · answered Oct 09 '15 at 14:12

0

I think you have to serialize the file on the server side and if you sending a file then attach a custom header and appropriately handle that header requests on the server side.

answered Oct 09 '15 at 14:12

Aakash Kharche

41
2

score 0 · Answer 3 · answered Oct 12 '15 at 14:35

Create you formData upfront -> you don't need the transformer for that.
Add transformRequest : angular.identity to your HTTP headers. Your code should look similar to the snippet below:

$http.post('/api/endpoint', formData, {
  transformRequest : angular.identity,
  headers: {'Content-Type': undefined}
})
.success(function (data) {
  // do stuff with data
})
.error(function (error) {
  // recover from an error
});

Angular identity does nothing more than to spit back your form data: https://docs.angularjs.org/api/ng/function/angular.identity

Angularjs file upload in put method not working

Update

Update

Update

3 Answers3

Linked