Is the file-upload function being triggered twice?

Question

Is the file-upload function being triggered twice?

I want to share the code snippet I am working on:

.jade:

div(layout="row")
    div(layout="column", flex)
        label(style="margin-left: 5px") File
        md-button(class="md-raised", ng-click="onUploadClicked(3)") Upload
        input(id="image3", type="file", accept=".pdf", file-upload="uploadFile”, style="display: none;")

.js/controller:

$scope.uploadFile = function(file) {
    console.log("upload file");
}

$scope.onUploadImageClicked = function(position) {
    console.log("on upload image");
    $timeout(function() {
        document.querySelector('#image' + (position)).click();
    }, 100);
};

The issue I am facing is that the log message upload file gets printed twice, while the message on upload image only prints once when I click the Upload button, select a file from the chooser, and press Open.

What could possibly be causing this double firing of the upload file message in my code?

Update:

I attempted to use event.stopPropagation(), but it did not solve the problem.

In my javascript files, I have included just the angular.min.js one.

https://i.sstatic.net/LaViM.png

javascript angularjs

Answer 1

Answer №1

With the guidance of @AnthonyC, I was able to pinpoint the root cause.

In my Jade file, I discovered that I had duplicated this directive in two separate javascript files:

app.directive('fileUpload', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var onChangeFunc = scope.$eval(attrs.fileUpload);

            element.bind('change', function(){
                onChangeFunc(element[0].files[0]);
            });
        }
    };
}]);

The key takeaway here is to ensure there is only one instance of this directive throughout your entire Javascript codebase!

Answer 2

With the guidance of @AnthonyC, I was able to pinpoint the root cause.

In my Jade file, I discovered that I had duplicated this directive in two separate javascript files:

app.directive('fileUpload', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var onChangeFunc = scope.$eval(attrs.fileUpload);

            element.bind('change', function(){
                onChangeFunc(element[0].files[0]);
            });
        }
    };
}]);

The key takeaway here is to ensure there is only one instance of this directive throughout your entire Javascript codebase!

Is the file-upload function being triggered twice?

Answer №1

Similar questions

The Material UI theme of a React component is not locally scoped within the Shadow DOM

Altering the display attribute cancels out any opacity transitions

Struggling at the beginning, a basic angular leaflet directive encounters issues

Removing buttons from a table row dynamically

Preloading error alert message displayed during AJAX request

JavaScript "alternating pattern"

Is there a way to use jQuery to eliminate divs that contain multiple identical data values?

"Utilizing a null value for a zero in Material-ui's Textfield

Is it possible to validate a template-driven form without using the model-driven approach?

"Upon refreshing the page, the onclick event ceases to

The signup controller encountered a malfunction with illegal arguments: an undefined value and a string

Switch the array's value if the key is a match?

Only switch a radio button when the Ajax call results in success

Having difficulty retrieving the value of a form using javascript

The React application is being continuously accessed by a node.js server and processed within async functions

Stealing mouse events through Iframe

AngularJS anticipates the completion of a lone asynchronous request

Troubleshooting: Issues with JS DOM createElement and appendChild functions

Generating an array of objects using key-value pairs

Improve page loading speed by removing JavaScript and CSS that block rendering of above-the-fold content, specifically focusing on Angular JS