Showing a specific document from an <input> field using AngularJS

Question

Showing a specific document from an <input> field using AngularJS

I currently have a functional example using standard Javascript, but I am eager to enhance its compatibility with AngularJS.

My main objective is to dynamically update the span element with the filename of the file chosen by the user.

Below is the code snippet that I have implemented using native Javascript:

<span>
    <input  ng-model="uploadDownloads" type="file" style="visibility:hidden; width: 1px;" id=uploadDownloads name=uploadDownloads onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))"  /> <!-- Chrome security returns 'C:\fakepath\'  -->
    <input  class="btn btn-primary" type="button" value="choose file" onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
    <span  class="badge badge-important" ></span>
</span>

I have already implemented the filereader function in AngularJS:

$scope.add = function(valid){
        if(valid){
                $scope.data = 'none';
                var f = document.getElementById('uploadDownloads').files[0];
                var r = new FileReader();
                r.onloadend = function(e){
                    $scope.data = e.target.result;
                    $scope.notPass = false;
                    $modalInstance.close({
                        'data':$scope.data,
                        'fileName':$scope.fileName,
                        'fileExplain':$scope.fileExplain
                    });
                };
            /*activate the onloadend to catch the file*/
                r.readAsBinaryString(f);
        } else {
            $scope.notPass = true;
        }
    };

However, I am facing a challenge in triggering the onclick and onchange events in AngularJS instead of regular JavaScript to update my <span> element with the selected filename.

javascript angularjs filereader

Answer 1

Answer №1

This question is an extension of a previous question and answer. However, I have made modifications to the code provided in that answer to suit the specific requirements of this question, which involve updating a <span> element with the filename selected by a user in a way that aligns with AngularJS practices.

For a demonstration, you can view a sample on codepen.

Below is the relevant segment of the HTML file:

<body ng-controller="AppController">
    <input ng-model="uploadDownloads" type="file" fd-input file-name="fileName"/> 
    <span class="badge badge-important">Output here: {{fileName}}</span>
</body>

The crucial element here is the custom directive called fd-input, which establishes a two-way binding with an attribute named

file-name</code. By assigning one of your <code>$scope

variables to this attribute, the directive will automatically bind the selected filename to it. Here are the controller and directive implementations.

(function() {
  'use strict';

  angular.module('app', [])
    .controller('AppController', AppController)
    .directive('fdInput', fdInput);

  function AppController($scope) {
    $scope.fileName = '';
  }

  function fdInput() {
    return {
      scope: {
        fileName: '='
      },
      link: function(scope, element, attrs) {
        element.on('change', function(evt) {
          var files = evt.target.files;
          console.log(files[0].name);
          console.log(files[0].size);

          scope.fileName = files[0].name;
          scope.$apply();
        });
      }
    }
  };

})();

As mentioned earlier, the directive is adapted from a solution provided in another SO answer. I have enhanced it by introducing a scope for a two-way binding with a file-name attribute:

...
return {
  scope: {
    fileName: '='
  },
...

The selected filename is then assigned to the two-way binding:

...
scope.fileName = files[0].name;
scope.$apply();
...

Feel free to explore the codepen for a practical demonstration. Avoid relying on the parent scope within the directive, as it may restrict the directive to be used only once per controller. Moreover, if you intend to handle multiple files, you will need to upgrade the code to support an array of files instead.

I hope this explanation proves beneficial.

Answer 2

This question is an extension of a previous question and answer. However, I have made modifications to the code provided in that answer to suit the specific requirements of this question, which involve updating a <span> element with the filename selected by a user in a way that aligns with AngularJS practices.

For a demonstration, you can view a sample on codepen.

Below is the relevant segment of the HTML file:

<body ng-controller="AppController">
    <input ng-model="uploadDownloads" type="file" fd-input file-name="fileName"/> 
    <span class="badge badge-important">Output here: {{fileName}}</span>
</body>

The crucial element here is the custom directive called fd-input, which establishes a two-way binding with an attribute named

file-name</code. By assigning one of your <code>$scope

variables to this attribute, the directive will automatically bind the selected filename to it. Here are the controller and directive implementations.

(function() {
  'use strict';

  angular.module('app', [])
    .controller('AppController', AppController)
    .directive('fdInput', fdInput);

  function AppController($scope) {
    $scope.fileName = '';
  }

  function fdInput() {
    return {
      scope: {
        fileName: '='
      },
      link: function(scope, element, attrs) {
        element.on('change', function(evt) {
          var files = evt.target.files;
          console.log(files[0].name);
          console.log(files[0].size);

          scope.fileName = files[0].name;
          scope.$apply();
        });
      }
    }
  };

})();

As mentioned earlier, the directive is adapted from a solution provided in another SO answer. I have enhanced it by introducing a scope for a two-way binding with a file-name attribute:

...
return {
  scope: {
    fileName: '='
  },
...

The selected filename is then assigned to the two-way binding:

...
scope.fileName = files[0].name;
scope.$apply();
...

Feel free to explore the codepen for a practical demonstration. Avoid relying on the parent scope within the directive, as it may restrict the directive to be used only once per controller. Moreover, if you intend to handle multiple files, you will need to upgrade the code to support an array of files instead.

I hope this explanation proves beneficial.

Showing a specific document from an <input> field using AngularJS

Answer №1

Similar questions

Scrolling to an id element in Vue.js can be achieved by passing the ID in the URL using the "?" parameter. This

What is the most effective way to ensure that a child component only executes when a link is clicked on the Vue component?

Sending information using AJAX to interact with a PHP script

How can HTML5 geolocation be utilized to provide real-time latitude and longitude coordinates for integration with the Google Maps API?

Utilizing JavaScript or jQuery to adjust the cursor pointer value based on user input

Trying to extract data from the ASX website's table using web scraping techniques

Information vanishes as the element undergoes modifications

Creating a Google Captcha with validation is a straightforward process that can enhance the

Modifying the CSS class of an element does not produce the desired effect after altering its styles using JavaScript

What is the way to bypass certificate validation when making a Fetch API request in the browser?

JQuery table sorter is unable to effectively sort tables with date range strings

What is the process for generating an array of arrays in a React component?

Problem with Snowpack's internal module import paths

Is there a way to remotely access and read text files stored on a server using either JavaScript or Ajax from an IIS6.0 Virtual directory?

Solving an asynchronous variable that is already present in the route provider

Is it possible for numerous directives to utilize an isolated scope on a single element?

Preserving Leading Zeros in Java When Parsing and Formatting a Text File

The title for beforeShowDay in bootstrap-datepicker is not functioning as expected

Unidentified event listener

I need help figuring out how to represent a nested array within an array of objects within my data instance in Vue