Uploading images using Angularjs

Question

I have this code for image uploading:

$scope.uploadAvatar = function(e) {
    $scope.uploadAvatarError = false;
    $scope.uploadAvatarSuccess = false;
    var f = document.getElementById('uploadAvatar').files[0],
        fd = new FormData();
    if (!f) {
        return
    }

    fd.append('user', $scope.user.user_email);
    fd.append('photo', f);

    $http.post(apiUrl + 'addProfilePicture', fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).then(function(response){
        console.log(response);
    })
}

When I send it to server, it returns status 200, but nothing is uploaded. In network tab in chrome dev tools it says ContentType application/json instead of multipart/form-data. How can I change that?

Most browsers are only able to upload files if multipart/form-data is used. I would suggest you to read this answer, maybe it can help a bit: stackoverflow.com/a/4073451/1867076 — Prometheus
– Prometheus, Commented Dec 6, 2016 at 13:40
Possible duplicate of how to upload file using Angularjs, multipart/form-data — georgeawg
– georgeawg, Commented Dec 6, 2016 at 20:39
The only difference from your code and this DEMO on PLNKR is that the demo waits for the "change" event on the file picker element before doing fd.append; — georgeawg
– georgeawg, Commented Dec 6, 2016 at 20:46

Romain · Accepted Answer · 2016-12-06 13:48:05Z

0

You can use the very thorough angular-file-upload module to achieve that. If I may, you can even add the preview with this module, which can be useful / nice in case of avatars.

answered Dec 6, 2016 at 13:48

Romain

3,7038 gold badges33 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Uploading images using Angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related