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
– shaunhusain, Commented Aug 22, 2013 at 0: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
– shaunhusain, Commented Aug 22, 2013 at 1:12
This is quite a standard way of having a styled file input, by hiding the actual <input> 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
– mcfedr, Commented Oct 22, 2013 at 13:14

mcfedr · Accepted Answer · 2013-10-22 13:17:43Z

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, 2013 at 13:17

mcfedr

7,9953 gold badges34 silver badges28 bronze badges

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

1 Comment

inolasco Over a year ago

I had the same issue as OP, and using $timeout instead of setTimeout worked for me as well

toxaq · Accepted Answer · 2014-05-08 14:09:13Z

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 8, 2014 at 14:09

toxaq

6,8873 gold badges50 silver badges57 bronze badges

answered Aug 22, 2013 at 20:56

AZ.

7,6016 gold badges47 silver badges62 bronze badges

Comments

Benjamin Conant · Accepted Answer · 2015-05-07 21:28:08Z

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;
}

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related