How to trigger 'click' event of on a file input in Angular?

Question

here is the view in jade:

button#save-csv-btn(ng-click="click()") Export CSV
input#save-csv(style="display:none", type="file", onchange="angular.element(this).scope().saveCSVFileChanged(this)")

js:

$scope.click = ->
    # $('#save-csv').trigger('click')

Error I get:

Error: $apply already in progress

You probably want to include the actual javascript here and the output from jade instead of the pre-processed code since more people will be able to help. Generally this means you called $scope.$apply() within a function that is triggered during a $scope.$apply() — shaunhusain, Aug 22 '13 at 00:56
Also this seems generally like a bad idea, although you're not manipulating the DOM even assuming some element is there by name without using directives as your means to encapsulate that logic is not good. — shaunhusain, Aug 22 '13 at 01:12
This is quite a standard way of having a styled file input, by hiding the actual and triggering click on it from another method. the problem is that angular throws an error because it does an apply within an apply — mcfedr, Oct 22 '13 at 13:14

score 11 · Answer 1 · answered Oct 22 '13 at 13:17

11

I changed $scope.click function to trigger the input click in a setTimeout. This lets the first $apply finish, and then will trigger another one.

$scope.click = function() {
    setTimeout(function() {
        inputEl.click();
    }, 0);
}

Note that I use setTimeout, not $timeout. $timeout would also be inside an $apply block.

answered Oct 22 '13 at 13:17

mcfedr

7,845
3
31
27

I had the same issue as OP, and using $timeout instead of setTimeout worked for me as well – inolasco Oct 28 '14 at 22:33

score 3 · Accepted Answer · edited May 08 '14 at 14:09

3

The idea was to use button to 'emulate' the file input; I achieved this using http://gregpike.net/demos/bootstrap-file-input/demo.html.

input#save-csv(type="file", title="Export to CSV", onchange="angular.element(this).scope().saveCSVFileChanged(this)")

edited May 08 '14 at 14:09

toxaq

6,745
3
46
56

answered Aug 22 '13 at 20:56

AZ.

7,333
6
44
62

score 1 · Answer 3 · answered May 07 '15 at 21:28

I just came across this problem and have written a drop in solution. You can write a custom directive composed of a container, a button, and an input element with type file. With CSS you then place the input over the custom button but with opacity 0. You set the containers height and width to exactly the offset width and height of the button and the input's height and width to 100% of the container.

the directive

angular.module('myCoolApp')
  .directive('fileButton', function () {
    return {
      templateUrl: 'components/directives/fileButton/fileButton.html',
      restrict: 'E',
      link: function (scope, element, attributes) {

        var container = angular.element('.file-upload-container');
        var button = angular.element('.file-upload-button');

        container.css({
            position: 'relative',
            overflow: 'hidden',
            width: button.offsetWidth,
            height: button.offsetHeight
        })

      }

    };
  });

a jade template if you are using jade

div(class="file-upload-container") 
    button(class="file-upload-button") +
    input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")

the same template in html if you are using html

<div class="file-upload-container">
   <button class="file-upload-button"></button>
   <input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" /> 
</div>

the css

.file-upload-button {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid black;
    height: 100px;
    width: 100px;
    background: transparent;
    font-size: 66px;
    padding-top: 0px;
    border-radius: 5px;
    border: 2px solid rgb(255, 228, 0); 
    color: rgb(255, 228, 0);
}

.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

How to trigger 'click' event of on a file input in Angular?

3 Answers3

Linked