Display files in the select control on button click in angularJS

Question

I have a file controrl, button and select control. Like below,

<div class="form-group">
        <h4><b>File Upload</b></h4>
        <label for="file">File</label>
        <input type="file" id="file" ng-model="message.file" class="form-control"/>
        <input type="button" value="Add" id="addFile" ng-click="addFiles(1)"/>
    </div>
    <div class="form-group">
        <label for="fileList">These are your selected files</label>
       <br/>
        <select name="files" ng-model="message.files" size="4" class="form-control"></select>
    </div>

Once the files are browsed, on button click the files local path along with filename should be displayed in select control. If i select another file 2nd time that also should be displayed in select control. That is 2 files name.

Am new to angularJS, so wondering how to do that, can anyone throw light on this.

Below is my angular Controller,

messageBoardApp.controller('messageBoardController',
    function messageBoardController($scope,messageBoardService) {
        //$scope.submitForm = function () {
           // debugger;
           // alert("Controller");
           // messageBoardService.SaveMessage($scope.message);
        //};

        $scope.addFiles=function(){

           }
    });

This functionality is completely client side, that is in user machine. User can also remove any one of the selected files by clicking remove button.

@Claies ok, can you give me some sample code which i can try. Thanks — Govind
– Govind, Commented Jul 16, 2015 at 1:39
I think there is no default binding provided by angular to input type=file. So you might have to look into using something like this directive: github.com/danialfarid/ng-file-upload — Matt Herbstritt
– Matt Herbstritt, Commented Jul 16, 2015 at 1:41

Matt Herbstritt · Accepted Answer · 2015-07-16 02:33:06Z

To access the selected files you will need to use or create a directive or something because as I said in the comment Angular doesn't support binding to type="file" inputs.

You can read about it here. In the linked thread there are recommendations for this open source solution. However, If you want a quick and dirty solution I have adapted some code that was also posted in that thread by user db-inf to show another possible solution.

DEMO

app.js

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

app.controller('MainCtrl', function($scope) {

  $scope.files            = [];
  $scope.selectedFile     = $scope.files[0] || 'undefined'; 
  $scope.addedFiles       = [];

  $scope.updateFileList   = updateFileList;


  function updateFileList(file){
    console.log('file', file);

    $scope.files.push({
      name: file.name,
      type: file.type
    });

    // angular doesn't know about the file input so 
    // we have to manually update the scope
    $scope.$digest();
  }


});

app.directive('onFileSelected', function(){

  return {
    restrict: 'A',
    scope: {
      onFileSelected: '='
    },
    link: link
  }

  function link(scope, element, attrs){

    element.bind("change", onChange);

    function onChange(){

      var file = element[0].files[0];

      scope.onFileSelected(file);

      scope.$digest();
    }

  }


})

index.html

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form>
      <div class="form-group">

        <h4><b>File Upload</b></h4>
        <pre>Files: {{files}}</pre>
        <pre>SelectedFile: {{selectedFile}}</pre>

        <label for="file">File</label>

        <input 
          type="file" 
          id="file" 
          class="form-control" 
          on-file-selected="updateFileList"
        />


      </div>
      <div class="form-group">
          <label for="fileList">These are your selected files</label>
         <br/>
          <select 
            name="files" 
            ng-model="selectedFile" 
            ng-options="option.name for option in files" 
            size="4" 
            class="form-control"
          ></select>
      </div>
    </form>
  </body>

</html>

Matt, i did try your solution, but not working for me and i wanted the files to be displayed in select control UI upon button clicking. In your code it seems no button.

Collectives™ on Stack Overflow

Display files in the select control on button click in angularJS

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