Angular JS File Upload and Laravel Backend

Question

I'm currently having problems with my file upload function together with other fields in angular. I tried to test my laravel function to save and upload file with other fields with POSTMAN and it worked.

However, upon trying it to work with Angular JS Form, it is giving me an error like this:

This is my angular js code for getting all input from form and passed it to laravel:

  $scope.addAccount = function(obj) {
        if ($scope.transformForm.$valid && $scope.netForm.$valid) {
            $scope.uploadAccountProf();
        //$state.go("detailed");
            DataFactory.AddAccount($scope.obj).then(function successCallback(response) {
                console.log("success");
                Materialize.toast('Account Saved!', 8000, 'greenbg rounded nobr');
                $state.go('detailed');
                }, function errorCallback(response) {
                console.log("Error");
            });
        }
        else{
            console.log("try again");
            Materialize.toast('Please fill out all required field.', 8000, 'redbg rounded nobr');
        }

The code below is the responsible for the upload file thingy:

 $scope.uploadAccountProf = function(roastSlidesUpload){
        var fileAccount = angular.element(document.querySelector('#accountProfile'));
        var fileCompliance = angular.element(document.querySelector('#fileUpload'));
        //console.log(myRoastSlide[0].files[0]);
        $scope.obj['accountProfile']=fileAccount[0].files[0];
        $scope.obj['fileUpload']=fileCompliance[0].files[0];
        console.log($scope.obj);
        var formData = new FormData();
        formData.append('file', $scope.obj);

        console.log("asd",formData);
        return $scope.obj;
  };

My form:

<form id="transformForm" name="transformForm" class="addingTransformation" novalidate>

Below is my form for file upload only, not including the other textboxes:

<div class="row">
                            <div class="file-field input-field col s12">
                                <div class="btn">
                                    <span>File</span>
                                    <input id="accountProfile" type="file">
                                </div>
                            <div class="file-path-wrapper">
                                <input id="acctProfile" class="file-path validate" placeholder="Accout Profile" type="text">
                            </div>
                            </div>
                        </div>

My button:

<button class="btn waves-effect waves-light right submit allmargin" type="submit" name="action" ng-click="verifiedaccount()">Submit
            <i class="material-icons right">send</i>
        </button>

Can someone help me? I've been trying to solve this for weeks and still can't figure out what's wrong, and why angular is returning that error to me. :(

Answer 1

I have very little experience with Angular, so I don't know if it's right, but to upload a file through a HTML form, you normally need to set it's enctype.

Can you add enctype="multipart/form-data" to your <form> tag and try again?