File upload with other data in angularjs with laravel

Question

I want to upload file and other data with angularjs. I am usign FormData but I receive blank array from server side.

This is my form

<form ng-submit="beatSubmit()" name="beatform" enctype="multipart/form-data">
  <input type="text" id="beat-name" ng-model="beatData.title" required="required" />
  <input type="file" id="image" file-model="image" />
  <input type="file" id="tagged_file" file-model="tagged_file" accept="audio/mp3" />
  <input type="file" id="untagged-beat" file-model="untagged_file" accept="audio/mp3" />
  <input type="text" class="form-control" id="price1" ng-model="beatData.price1">
</form>

Here is my Controller and FileModel directive

app.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
  }]);
 // This is controller part in another file
   $scope.beatSubmit = function(){

            var image = $scope.image;
            var tagged_file = $scope.tagged_file;
            var untagged_file = $scope.untagged_file;

            var response = BEAT.uploadBeat($scope.beatData,image,tagged_file,untagged_file);
            response.success(function(response){
                console.log(response);
            });
        }

And this is my service

uploadBeat:function(data,image,tagged_file,untagged_file){
            var fd = new FormData();
            fd.append('image', image);
            fd.append('tagged_file', tagged_file);
            fd.append('untagged_file', untagged_file);

            angular.forEach(data, function(value, key) {
                fd.append(key,value);
            });
            console.log(fd); // fd is null , I don't know why?
            var req = {
                         method: 'POST',
                         transformRequest: angular.identity,
                         url: 'api/upload_music',
                         data: fd,
                         headers:{
                             'Content-Type': undefined,
                             }
                        }
            return $http(req);

        }

When I tring to get these data from server side It will return null. I spent more time to resolve this But I didn't got any solution. If anyone know Please help me out. Thanks in advance.

Answer 1

Add this header details to the $http

$http({
                    method: 'POST',
                    url: '',
                    headers: {
                              'X-Requested-With': 'XMLHttpRequest',
                              'Accept':'*/*',
                              'Content-type':'application/x-www-form-urlencoded;charset=utf-8'
                             },
                    params:data,
                    timeout:4000
                  });

Laravel not allowed to submit ajax request without same domain policy

Answer 2

I found an error, I have to remove enctype="multipart/form-data" from form.