Is there a way to simulate a click event (on a file type input) within a promise?

I've been struggling with this issue for a long time and have not been able to find a solution. The problem arises when attempting to trigger a click event on a file input type from within a promise. When I directly trigger the event inside the promise, an error is logged in the console stating "digest in progress." If I insert a timeout within the promise, the error disappears but the event still does not get triggered. The only workaround I've found is adding a setTimeout function outside the promise for around one second, which I do not want to rely on.

The controller code snippet appears as follows:

scope.handleDblClick = function () {
    asyncFunction()
        .then(function (response){
            switch(response){
                case 'option1':
                    //do something
                    break;
                case 'option2':
                    document.getElementById('fileInputId').click();
                    break;
            }

        });
}

This function is activated upon double clicking on a text input field.

<input type="text" ng-dblclick="handleDblClick()"/>

This is the file input that needs to be clicked within the promise.

<input type="file" id="fileInputId"/>

The event must be triggered in this manner because the outcome of the async function determines whether the file input will be clicked or another action will be taken. The handleDblClick function executes different actions based on the promise response, including opening a file explorer to select a file.

Answer №1

After some investigation, I realized that JavaScript will only activate the dialog box for an input file element if it originates from a user-triggered event handler and is considered trusted :) Thank you!

I want to share the link here

https://github.com/react/material/issues/7462

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it necessary to generate a file for each API in Next.js?

When working with Next.js, it is common practice to create a separate file for each new API endpoint. For example, for the /user endpoint, there would be a user.js file with its own handler, and another one for /user/goldmember. Some may argue that this ...

The wonders of jQuery popup windows

A code was discovered that displays a popup, but it currently relies on transparency (opacity: 0). I would like to modify it to use display: none instead, as the transparent window in the center of my website is causing issues. Here is the JavaScript code ...

Retrieve the values of a particular key from your Django queryset JSON data and then seamlessly send them over to VueJS

I recently developed a web app using Django2 with Vue for the frontend. I encountered an issue in passing all values of a specific key from JSON data to a JavaScript dictionary value on the frontend. Despite trying to use the += operator to add the data, I ...

Experiencing issues with applying bootstrap style to pagination when using react-js-pagination

I am currently utilizing the react-js-pagination library to showcase page numbers within my application. Bootstrap has been included in the public/index.html file and can be accessed using className in other components. When it comes to the Pagination com ...

Input the variant number TypeScript as the key value pair

I'm struggling to input an abi key "5777" in Typescript. When I receive a network ID and try to set it in the networks key, the linter displays an error. My issue is that I need to specify "networkId" and it's not always a fixed value like "5777 ...

Error message: Laravel unable to locate requested page

Attempting to make a post request using AngularJS in Laravel, I encountered the following error message: Oops! The page you are trying to access could not be found. JAVASCRIPT app.controller('main',['$scope','$http',&apos ...

Dividing a collection of URLs into smaller chunks for efficient fetching in Angular2 using RxJS

Currently, I am using Angular 2.4.8 to fetch a collection of URLs (dozens of them) all at once. However, the server often struggles to handle so many requests simultaneously. Here is the current code snippet: let collectionsRequests = Array.from(collectio ...

Is Angular causing the issue with Datalist not functioning in IE9?

Autocomplete feature using datalist in Angular works perfectly on all browsers except IE9. I even tried the following workaround: <datalist id="associates"> <!--[if IE 9]><select disabled style="display:none"><![endif]--> <o ...

Ways to eliminate the blue selection box when dragging canvas objects in fabric framework

I've been trying to find a solution to remove the annoying blue highlight box that appears when dragging on the canvas while using fabric js, but so far I haven't had any luck. I've tried the following code, but it only works for text and n ...

Adjust Sidebar Height to Match Document Height (using React Pro Sidebar)

Having an issue with the height of a sidebar component in Next.js using React Pro Sidebar. It seems to be a JavaScript, HTML, and CSS related problem. I've tried several suggested solutions from Stack Overflow, but none of them seem to work. Surprisin ...

Reset button in AngularJs fails to reset the $error.required message

<div class="form-group"> <input type="text" name="Name" data-ng-model="panNumber" required> <p data-ng-show="loginForm.Name.$error.required && (loginForm.Name.$touched || submitted)" class="error-block">Please make s ...

How can I add a hyperlink to a Javascript string array?

I am currently facing a challenge in adding a hyperlink to a string using .link and .innerHTML methods. I believe there might be a misunderstanding on my part as I am quite new to this. Here is the code snippet I have been working with: <div id="type ...

Concealing Website Elements with javascript based on class assignments

Despite my hesitation, I have to ask this question after unsuccessful searches in related articles. In my code, I have 7 nav links all with the same class. Due to the length of the HTML, I am looking for a way to hide contents until the link is clicked, an ...

Vue.js using the v-for directive with index

Just started using Vue.js and I have a question: I'm working with an array to create a table. When I double click on a table row, I want the program to execute a JavaScript function that will retrieve the selected item based on its index. <di ...

Notification in AngularJS when navigating away from page

Despite finding similar posts, none of the solutions seem to work for me as intended. I'm attempting to set up an event handler to monitor a location change within a specific scope. The code snippet in question is: <!DOCTYPE html> <html lan ...

What is the best way to have Protractor run multiple test cases repeatedly?

I am developing a web application using AngularJS and utilizing the Protractor end-to-end test tool. My goal is to create a continuous e2e test that involves logging in, clicking various elements, writing texts, then logging off and repeating the process ...

JavaScript: Converting an Array to a String

Having trouble making the string method work with an array - it keeps showing up as empty. let url = "https://api.myjson.com/bins/be7fc" let data =[]; fetch(url) .then(response => response.json()) .then(result => data.push(r ...

Using Node and Mongoose to link documents that rely on each other for reference

Is there a way to add a document after another document has been successfully inserted using node and mongoose? For example, I initiate the creation of a document with mongoose, and once it is successfully added, I want to trigger the insertion of another ...

Grouping emitted events using RxJS in a Node.js environment

Currently, I am interfacing with a database and receiving the results in a continuous stream of events labeled 'db_row_received'. My aim is to categorize these results based on the company Id, however, I am encountering an issue where the subscri ...

Strategies for determining the direction of a slide event within a Bootstrap carousel

I am attempting to identify the direction of the slide in a Bootstrap 4 carousel when the user initiates the slide event. Is there a method to achieve this? $('#myCarousel').on('slide.bs.carousel', function () { //Determine wheth ...