angularjs upload file using components

Question

I am trying to upload file using angular component structure but i am not able to get the selected files.

Step 1:Template data.

<form name="form">
    Hello {{vm.name}} <br />
    Upload:     <input my-directive type="file" name="file" ng-model="files" /> <br />
    <input type="button" ng-click='vm.uploadFile()' value="Upload File." />
</form>

Step 2: Js file combined looks like

'use strict';
angular.module('app', ['ngFileUpload']);


class TestController {

    constructor(){
        this.name = 'user';
    }

    getFiles(selectedFiles){
        console.log('Selected files are : ' + JSON.stringify(selectedFiles));
        this.files = selectedFiles; // results empty data.
    }

    uploadFile (){
        console.log('Model data i.e. files consists of : ' +  JSON.stringify(this.files));
          // Upload code will do later.
    }

}


angular.module('app').directive('myDirective', function () {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attr) {

            element.bind('change', function () {
                console.log('Value of element is :' + JSON.stringify(element[0].files[0]));              
            });

        }
    };
});

//Created a test controller here.
angular.module('app').controller('TestController', TestController);

// Created a component here.
angular.module('app').component('test', {
  templateUrl: 'test.html',
  controller: TestController,
  controllerAs : 'vm',
});

Thanks in Advance, well i am new to angular :)

Codepen is really easy. Post a reply when you've done it so I get notice and I'll take a look. — Mike Feltman
– Mike Feltman, Commented May 5, 2016 at 15:08
Try this link codepen.io/manish0731582008/pen/EKGRyQ?editors=0011 — Manish Singh
– Manish Singh, Commented May 5, 2016 at 15:18
Please tell me if in case you face any issues while accessing the link. — Manish Singh
– Manish Singh, Commented May 5, 2016 at 15:21

Mike Feltman · Accepted Answer · 2016-05-05 15:52:28Z

0

Sorry, I didn't notice that you were using typescript. I'm not really up to speed on ts at all yet. I answered a somewhat similar question that I can't find right now the other day with the code below. Note that there's an issue with ng-model and the file input type, so it uses document.getElementById to figure out the file. I suspect that this issue is what you're running into.

<html>
<body>
  <form name="form" ng-app="app" ng-controller="Ctrl as ctrl">
    Upload file:
    <input type="file" id="file" ng-model="ctrl.file" />
    <br/>
    <br/> Enter text:
    <textarea id="textarea" ng-model="ctrl.text"></textarea>
    <br/>
    <br/>
    <button class="btn btn-primary btn-large" ng-click="ctrl.submitForm()">Submit</button>
  </form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">

</script>
<script>
  angular.module('app', []).controller('Ctrl', function() {

  var vm = this;
  vm.file = ""
  vm.text = ""

  vm.submitForm = function() {
    // angular doesn't update the model for input type="file"
    vm.file = document.getElementById('file').value;
    var retVal = false ;
    alert(vm.file);
    alert(vm.text);
    if (vm.file && ! vm.text) 
      {retVal = true}
    else if (vm.text && ! vm.file) 
       {retVal = true}
    else if (!vm.text && !vm.file) 
      {retVal = false}
    else if (vm.text && vm.file) 
      {retVal = false}

    if (!retVal) {
      alert("Please specify either a file or text, not both!")
    } else
      alert("ok")
  }
});

</script>

</html>

answered May 5, 2016 at 15:52

Mike Feltman

5,1761 gold badge19 silver badges39 bronze badges

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

1 Comment

Mike Feltman Over a year ago

Also there are a couple of good solutions in this answer: stackoverflow.com/questions/32220888/…

Collectives™ on Stack Overflow

angularjs upload file using components

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related