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. :(

Could you post code of DataFactory.AddAccount function? and what part of the code is in line 369? — boroboris
– boroboris, Commented Sep 19, 2016 at 16:20
@Dhenn : Did you ever find a solution for this ? I have the same similar set up like you. I am running in to the same issue. — code-8
– code-8, Commented Mar 27, 2017 at 17:09

Loek · Accepted Answer · 2016-09-16 17:20:36Z

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?

answered Sep 16, 2016 at 17:20

Loek

4,15323 silver badges35 bronze badges

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

1 Comment

Dhenn Over a year ago

Tried that already but it is still not working. Receiving the same error.

Collectives™ on Stack Overflow

Angular JS File Upload and Laravel Backend

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related