Upload file with angular material and angular JS

Question

For the code, i have take inspiration from this :

https://codepen.io/alexandergaziev/pen/JdVQQm

So, for the HTML, i have do this :

 <div class="file_input_div">
    <div class="file_input">
      <label class="image_input_button mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
        <i class="material-icons">file_upload</i>
        <input id="file_input_file" class="none" type="file"
               ng-model="file1"
               onchange="angular.element(this).scope().changeInputText(this);
                         angular.element(this).scope().changeState();"/>
      </label>
    </div>
    <div id="file_input_text_div" class="mdl-textfield mdl-js-textfield textfield-demo"
          ng-model="filetextdiv">
      <input class="file_input_text mdl-textfield__input"
             type="text" disabled readonly id="file_input_text"
             ng-model="filetext" />
      <label class="mdl-textfield__label" for="file_input_text">
      </label>
    </div>
  </div>

And in the corresponding controller :

 $scope.changeInputText = function(){
    console.log($scope.file1);
    console.log($scope.filetext);
    console.log($scope.filetextdiv);
    var str = $scope.file1.value;
    var i;

    if (str.lastIndexOf('\\')) 
    {
      i = str.lastIndexOf('\\') + 1;
    } 
    else if (str.lastIndexOf('/')) 
    {
      i = str.lastIndexOf('/') + 1;
    }

    $scope.filetext.value = str.slice(i, str.length);

  };

  $scope.changeState = function() {

    console.log("Coucou");
    if ($scope.filetext.value.length != 0) 
    {
      if (!$scope.filetextdiv.classList.contains("is-focused")) 
      {
        $scope.filetextdiv.classList.add('is-focused');
      }
    } 
    else 
    {
      if ($scope.filetextdiv.classList.contains("is-focused")) 
      {
        $scope.filetextdiv.classList.remove('is-focused');
      }
    }
  }

But there is a problem, and i don't undestand why :

When I chose a file, the functions in the controller are called.

But, the value (designed by ng-model, file1, filetext and filetextdiv) are undefined.

Why ?

georgeawg · Accepted Answer · 2017-05-04 11:54:27Z

1

Directive to enable `ng-model` with `input type=file`

app.directive('fileModel', function () {
    return {
        restrict: 'A',
        require: "ngModel",
        link: function(scope, elem, attrs, ngModel) {
            elem.on('change', function(e){
                ngModel.$setViewValue(elem[0].files);
            });
        }
    };
});

Usage

<input type="file" ng-model="vm.files" file-model />

How to POST a File Using the $http Service

When doing a POST of a file, it is important to set the Content-Type header to undefined.

var config = { headers: {
               "Content-Type": undefined,
              }
           };

$http.post(url, vm.files[0], config)
  .then(function(response) {
    vm.result = "SUCCESS";
}).catch(function(response) {
    vm.result = "ERROR "+response.status;
});

By default the AngularJS framework uses content type application/json. By setting Content-Type: undefined, the AngularJS framework omits the content type header allowing the XHR API to set the content type.

For more information, see MDN Web API Reference - XHR Send method

But, the value (designed by ng-model, file1, filetext and filetextdiv) are undefined.

Why ?

Why is file1 undefined? The core ng-model directive does not work with inputs of type=file

Note: Not every feature offered is available for all input types. Specifically, data binding and event handling via ng-model is unsupported for input[file].

— AngularJS input directive API Reference

Why is filetext undefined? The input is disabled.

 <input class="file_input_text mdl-textfield__input"
        type="text" disabled readonly id="file_input_text"
        ng-model="filetext" />

Why is filetextdiv undefined? The ng-model directive does not work with <div> elements.

<div id="file_input_text_div" class="mdl-textfield mdl-js-textfield textfield-demo"
     ng-model="filetextdiv">

Does that answer your question?

edited May 4, 2017 at 11:54

answered May 4, 2017 at 9:01

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

2 Comments

Simon Girard Over a year ago

Thanks. Since, I have found a solution, by using directives. Can I post here if it is useful ?

georgeawg Over a year ago

Yes, see Can I answer my own question?.

Collectives™ on Stack Overflow

Upload file with angular material and angular JS

1 Answer 1

Directive to enable `ng-model` with `input type=file`

Usage

How to POST a File Using the $http Service

Why ?

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Directive to enable ng-model with input type=file

Usage

How to POST a File Using the $http Service

Why ?

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Directive to enable `ng-model` with `input type=file`