How to submit form using Angularjs

Question

I am newbie to angularJS. I want to submit a form with angularjs.

I am using the following code :

var app = angular.module('zippyModule', []);

app.controller('Ctrl3', function($scope, $http, $location,$compile) {

    $scope.submit = function(){
        alert($scope.filename);
    }

});

and in form I am using :

  <div ng-show="show">
           <form ng-submit="submit()"  enctype="multipart/form-data">
           <input type="file" ng-model="filename" name="filename" />
           <br/>
           <input type="submit" class="btn btn-primary" name="upload" value="Upload">
           </form>
           </div>

When I am submitting the form then it is alerting undefined. How can I print the value of the file field after submitting the form ?

See http://stackoverflow.com/questions/17063000/ng-model-for-input-type-file — noj, Aug 15 '13 at 09:26

score 1 · Accepted Answer · answered Aug 15 '13 at 10:11

Below is the working example of file upload with angularjs

http://jsfiddle.net/danielzen/utp7j/

check the set file function added this in your controller

 scope.setFiles = function(element) {
    scope.$apply(function(scope) {
      console.log('files:', element.files);
      // Turn the FileList object into an Array
        scope.files = []
        for (var i = 0; i < element.files.length; i++) {
          scope.files.push(element.files[i])
        }
      scope.progressVisible = false
      });
    };

and added this line in your template

 <input type="file" ng-model-instant id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)" />

How to submit form using Angularjs

1 Answers1