Upload file with angular $http

Question

I am trying to upload form with image file with angular $http function and using multer at background to receive. I know how to submit the form directly(without angular), I can successfully upload it via:

    <form method="post"  enctype="multipart/form-data">  
        <input type="file" name="avatar" /><br/>  
        <input type="submit" value="submit"/><br/>  
    </form>

In this way, the image will be at req.file. However, when I try to use angular http to upload it:

    <form name="myForm" ng-model="formData" enctype="multipart/form-data"> 
        <input type="file" file-model="avatar" name="avatar" required/><br/>  
        <label class="item item-input">
            <button class="button button-block button-positive" ng-click="submit()" class="btn btn-primary btn-block">submit</button>
        </label>
        <label class="item item-input">
            <button class="button button-block button-dark" ng-click="home()" >back</button>
        </label>
    </form>

js:

$scope.submit = function() {
        var fd = new FormData();
        fd.append('avatar', $scope.avatar);
        $http({
            url:'/avatar',
            method: 'POST',            
            data: fd,
            headers: {
                'Content-Type': 'undefined'
            },
            transformRequest: angular.identity    
        }).success(function(data,status){
            if(status == 200) {
                window.location = '/home';
            }

        }).error(function(status, data){
            window.location = '/avatar';
        })
    }

the req.file field become undefined. So how to upload my image via angular $http?

Fabian Scheidt · Accepted Answer · 2016-11-27 13:05:23Z

0

The "file-model"-directive is not a part of angular. Did you include the dependency? https://github.com/ghostbar/angular-file-model

answered Nov 27, 2016 at 13:05

Fabian Scheidt

3924 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Upload file with angular $http

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related