Angular force an ng-click

Question

I currently have the following html which consists of 3 buttons (1 hidden). I have a button which triggers a hidden button which is used to select a file to upload and I have a third button which is used to call upload and send the data to the server. I would like to change this so that after selecting a file, the file is automatically uploaded. I am having issues triggering the upload button when a file is selected (and then I will hide the upload button once I have the automatic upload functionality working). I have tried using the onchange event to accomplish this but with no success

<div class="col-xs-12" style="margin-top:250px">
        <div class="col-xs-4" align="center" style="padding-left:290px">
            <button class="btn btn-default" ng-click="newProject()">New Project</button>
        </div>
        <form class="col-xs-4" align="center"
            ng-controller="CsvImportController" style="display: inline-block;padding-left:200px" id="csvForm">
            <a href="#" class="btn btn-default btn-file"
                onclick="document.getElementById('fileBrowser').click(); return false;">Select
                CSV File</a>
            <button id="submitCsv" class="btn btn-default" ng-click="upload()">Upload</button>
        </form>
        <div class="col-xs-4" align="center" style="padding-left:110px">
            <a class="btn btn-default">Browse
                Projects</a>
        </div>
    </div>
    <br>
    <br>
    <input id="fileBrowser" style="visibility: hidden;"
        class="btn btn-default btn-file" type="file" id="file" file-input="files" onchange="document.getElementById('submitCsv').click(); return false;"/>

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

See this answer for some libraries that will handle all the upload functionality for you as well as provide some other nice features.

onchange will not work on <input type="file"/> as it will not register a change when you select a file. ng-click will not work also as it will trigger when the input is first clicked, not when a file is selected.

You also can't apply any styles to an <input type="file" /> either, so I get what you're trying to do here, but <input type="file" /> does not offer much functionality which is really unfortunate.

You also have 2 ids defined on your hidden input. Make sure there is only one id so that you can call it correctly.

edited May 23 '17 at 10:28

Community

1
1

answered Mar 02 '16 at 00:55

jcc

1,137
1
12
31

are you sure? I was trying to do something similar to this post: http://stackoverflow.com/questions/7321855/how-do-i-auto-submit-an-upload-form-when-a-file-is-selected – GregH Mar 02 '16 at 01:08
Hmm, I tested it in a fiddle and it did not work. Have you tried putting your `upload()` call into the onchange and what happens? – jcc Mar 03 '16 at 01:21

Angular force an ng-click

1 Answers1