4

unable to send file with angular post call

I am trying to post .mp4 file with some data through ionic 1 with angular 1. While posting through POSTMAN it is fine and working. I am getting Success = false in my application.

in POSTMAN, no headers and data is bellow, Service url with POST request http://services.example.com/upload.php body in form data

j_id = 4124, type = text   
q_id = 6, type = text   
u_id = 159931, type = text 
file = demo.mp4, type = file

in my app:

$rootScope.uploadQuestion = function () {

    var form = new FormData();
    form.append("j_id", "4124");
    form.append("q_id", "6");
    form.append("u_id", "159931");
    form.append("file", $rootScope.videoAns.name); //this returns media object which contain all details of recorded video

    return $http({
        method: 'POST',
        headers: { 'Content-Type': 'multipart/form-data' }, // also tried with application/x-www-form-urlencoded
        url: 'http://services.example.com/upload.php',
        // url: 'http://services.example.com/upload.php?j_id=4124&q_id=8&u_id=159931&file='+$rootScope.videoAns.fullPath,
        // data: "j_id=" + encodeURIComponent(4124) + "&q_id=" + encodeURIComponent(8) + "&u_id=" + encodeURIComponent(159931) +"&file=" + encodeURIComponent($rootScope.videoAns), 
        data: form,
        cache: false,
        timeout: 300000
    }).success(function (data, status, headers, config) {
        if (status == '200') {
            if (data.success == "true") {
                alert('uploading...');
            }


        }


    }).error(function (data, status, headers, config) {

    });
}
Improve this question
2

1 Answer 1

Reset to default
4

RECOMMENDED: POST Binary Files Directly

Posting binary files with multi-part/form-data is inefficient as the base64 encoding adds an extra 33% overhead. If the server API accepts POSTs with binary data, post the file directly:

function upload(url, file) {
    if (file.constructor.name != "File") {
       throw new Error("Not a file");
    }
    var config = {
        headers: {'Content-Type': undefined},
        transformRequest: []
    };
    return $http.post(url, file, config)
      .then(function (response) {
        console.log("success!");
        return response;
    }).catch(function (errorResponse) {
        console.error("error!");
        throw errorResponse;
    });
}

Normally the $http service encodes JavaScript objects as JSON strings. Use transformRequest: [] to override the default transformation.

DEMO of Direct POST

angular.module("app",[])
.directive("selectNgFiles", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink(scope, elem, attrs, ngModel) {
    elem.on("change", function(event) {
      ngModel.$setViewValue(elem[0].files);
    });
  }
})
.controller("ctrl", function($scope, $http) {
  var url = "//httpbin.org/post";
  var config = {
    headers: { 'Content-type': undefined }
  };
  $scope.upload = function(files) {
    var promise = $http.post(url,files[0],config);
    promise.then(function(response){
      $scope.result="Success "+response.status;
    }).catch(function(errorResponse) {
      $scope.result="Error "+errorRespone.status;
    });
  };
})
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <input type="file" select-ng-files ng-model="files">
    <br>
    <button ng-disabled="!files" ng-click="upload(files)">
      Upload file
    </button>
    <pre>
    Name={{files[0].name}}
    Type={{files[0].type}}
    RESULT={{result}}
    </pre>
  </body>

Posting with 'Content-Type': 'multipart/form-data'

When posting data using the FormData API, it is important to set the content type to undefined:

function uploadQuestion(file) {

    var form = new FormData();
    form.append("j_id", "4124");
    form.append("q_id", "6");
    form.append("u_id", "159931");
    form.append("file", file); //this returns media object which contain all details of recorded video

    return $http({
        method: 'POST',
        headers: { 'Content-Type': undefined ̶'̶m̶u̶l̶t̶i̶p̶a̶r̶t̶/̶f̶o̶r̶m̶-̶d̶a̶t̶a̶'̶ }, // also tried with application/x-www-form-urlencoded
        url: 'http://services.example.com/upload.php',
        data: form,
        ̶c̶a̶c̶h̶e̶:̶ ̶f̶a̶l̶s̶e̶,̶ 
        timeout: 300000
    ̶}̶)̶.̶s̶u̶c̶c̶e̶s̶s̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶
    }).then(function(response) {
        var data = response.data;
        var status = response.status;
        if (status == '200') {
           console.log("Success");
        }    
    ̶}̶)̶.̶e̶r̶r̶o̶r̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶
    }).catch(function(response) {
        console.log("ERROR");
        //IMPORTANT
        throw response;    
    });
}

When the XHR API send method sends a FormData Object, it automatically sets the content type header with the appropriate boundary. When the $http service overrides the content type, the server will get a content type header without the proper boundary.

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

4 Comments

I get the response in success, but I am still unable to post file at location. I am getting app/video/video in response however I should get this response app/video/video.mp4
I have already used content-type as undefined and I was getting above response as now
@Mangrio The code in the answer is correct as written. Your problems come from either the server code or the code that obtains the file object, neither of which are included in the question.
how to get file progress % ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.