Ser Jorah Mormont Ser Jorah Mormont - 1 year ago 525
AngularJS Question

Upload multiple files in angular

I've a situation where I've a form in which I've a row where I've two text fields entries and I've to upload a file for that row and this kind of rows can be 'N' and then there is a master files that can be entered for whole form while these are some part of the form and I've to submit all these files at once on clicking a save button.

I'm kind of stuck with ng-upload it needs an api call, and I really can't have more than one api call for this form.
The sample html code is here.

<tr ng-repeat="itemRow in item.singleItem">
<input type="text" class="xdTextBox" name="" ng-model="model.itemRow[$index].name" />
<input type="text" class="xdTextBox" name="itemRow.manufacturer" ng-model="model.itemRow[$index].manufacturer" />
<input type="text" class="xdTextBox" name="itemRow.location" ng-model="model.itemRow[$index].location" />
<i class="pull-left glyphicon glyphicon-upload">
<input type="file" name="itemRow.doc" ng-model="model.itemRow[$index].doc" multiple=false>
<td><i class="pull-left glyphicon glyphicon-remove"></i></td>

Answer Source

Here is file value binding directive example ..

Js code is

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

app.controller('MainCtrl', function($scope) {
  $ = 'World';
  $scope.files = []; 
    alert($scope.files.length+" files selected ... Write your Upload Code"); 


app.directive('ngFileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind('change', function () {
                var values = [];
                angular.forEach(element[0].files, function (item) {
                    var value = {
                       // File Name 
                        //File Size 
                        size: item.size,
                        //File URL to view 
                        url: URL.createObjectURL(item),
                        // File Input Value 
                        _file: item
                scope.$apply(function () {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);

Html Code is

<!DOCTYPE html>
<html ng-app="myApp">

    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.3" src="" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <input type="file" ng-file-model="files" multiple />
    <button type="button" ng-click="upload()">Upload</button>

    <p ng-repeat="file in files">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download