How to upload FormData object using AngularJS

Question

I am new to angular-js, and wants to submit the multipart/form-data with an image and it's $http.post() method supports only json format, so I want to convert formdata object to the json format,

$scope.SubmitForm=function()
{
    url = siteurl + '/admin/' + $scope.module + '/add';

    var form=document.getElementById("addForm");
    var formData=new FormData(form);

    $http({
        url     :   url,
        method  :   "POST",
        data    :   formData,
    })
    .then(function(responseText) {                
        alert(JSON.stringify(responseText));

    //process data
    },function(){
        alert("hello from error");
    });

}

it didnot work for me; and i tried to make json format data for this and works fine

formData={
    "first_name" :  $('#first_name').val(),
    "last_name"  :  $('#last_name'),
    //....
};

but don't have any idea to append my image file to this format; what should i do right here to get my job.

Is there any way(function) to convert formdata object to json format

Converting data here. But why don't you use ng-model if you are in angular? — Dvir
– Dvir, Commented Nov 23, 2015 at 11:30
thanks for suggestion, but ng-model will not work for file, and I had new directive to works to but it's cumbersome one, — Veshraj Joshi
– Veshraj Joshi, Commented Nov 23, 2015 at 11:37

Veshraj Joshi · Accepted Answer · 2020-07-17 18:15:39Z

1

solved by putting two line of code like below, in $http configuration lines (thanks every body)-

      $http({
            url     :   url,
            method  :   "POST",
            data    :   formData,
            transformRequest: angular.identity, // see the angugular js documentation
            headers : {'Content-Type':undefined}// setting content type to undefined that change the default content type of the angular js
        }).then(function(responseText){
            
            alert(JSON.stringify(responseText));
            ///$scope.tablerows=$scope.totaltablerows;
            ///$scope.searchFunction();
        },function(){
            alert("hello from error");
        });

just this works for me

edited Jul 17, 2020 at 18:15

answered Nov 24, 2015 at 9:11

Veshraj Joshi

3,5874 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Sav · Accepted Answer · 2015-11-23 11:29:16Z

0

You should really use ng-model when working with forms in angular (can you provide your form in your example?). It creates a scope variable to work with in your controller and you will have two way binding if it is already defined... for example as your form isn't present I'd do something like this, this is simplified (and not tested)...:

<form name="myForm" ng-submit="SubmitForm()">
    Name: <input ng-model="fields.name">
    Address: <input ng-model="fields.address">
    ....
</form>

and in your JS controller...

 $scope.submitForm = function(){    
        var data = $scope.fields,
            url = '/admin/' + $scope.module + '/add'; // I assume $scope.module is available from elsewhere...  

        $http.post(url, data).then(function(resp){
        // do stuff...

        });        
    }

There's more info here... https://docs.angularjs.org/api/ng/directive/ngModel and W3schools have some examples: http://www.w3schools.com/angular/angular_forms.asp

edited Nov 23, 2015 at 11:29

answered Nov 23, 2015 at 11:24

Mike Sav

15.4k31 gold badges104 silver badges150 bronze badges

1 Comment

Jordan Kasper Over a year ago

This does not answer the OP's question.

user2118542 · Accepted Answer · 2015-11-23 11:24:48Z

-1

It Should be constructed like this:

  var form = document.getElementById('addForm');
  var fd = new FormData(form);
  var file = this.files[0];    
  fd.append("afile", file);
  // These way you add extra parameters
  fd.append("first_name", $('#first_name').val());
  fd.append("last_name", $('#last_name').val());

Reference example - from github

answered Nov 23, 2015 at 11:24

user2118542

Collectives™ on Stack Overflow

How to upload FormData object using AngularJS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related