score:3
you could add a focus event on the window to watch when it get focused back after the user closes the file input dialog.
let button = document.queryselector("button");
let input = document.queryselector("input");
let rendercount = 0;
let pagerefocused = () => {
button.textcontent = `user closed the dialog ${++rendercount} times`;
window.removeeventlistener("focus", pagerefocused);
};
button.addeventlistener("click", () => {
input.click();
// we watch the window after opening the file input dialog
window.addeventlistener("focus",pagerefocused);
});
input {
visibility:hidden;
}
<button>upload a file</button><input type="file">
Source: stackoverflow.com
Related Query
- cancel event on input type="file" hidden
- Hidden input doesn't trigger React's onChange event
- How to correctly catch change/focusOut event on text input in React.js?
- Enter key event handler on react-bootstrap Input component
- Updating a React Input text field with the value on onBlur event
- How to trigger INPUT FILE event REACTJS by another DOM
- Cancel wheel event with e.preventDefault in react event bubbling
- How to dynamically update the value for any input field with one event handler function, using hooks
- React TypeScript Input Paste Event
- handling of 'wheel' input event was delayed for yyy ms due to main thread being busy
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- Clear input text after click event
- React-router not changing routes with input onBlur event
- Ignored attempt to cancel touchmove event with cancelable=false,for example because scrolling is in progress and cannot be interrupted
- React Redux Saga Event Channel Cancel
- How to send input hidden in React JS?
- React warning: "is changing an uncontrolled input of type hidden to be controlled" why?
- React input focus event to display other component
- How to test an onChange input event with enzyme and jest
- Bind text input value on change event - React Native + Redux
- What type should I use for input react-bootstrap event with TypeScript?
- Stop event propagation from input in React
- React Hooks onchange event too slow for scanner input
- Cancel onClick event of parent component in child component in React
- What is the event type of Input element in material-ui v1?
- React - Cannot dispatch onChange event from input text element programatically
- Trouble using TestUtils.Simulate to create a change event on an input element
- How to scroll 'onClick' component that is hidden before onClick event
- Using Lodash debounce with React useCallback for input onChange event
- Focus on newly-rendered text input after tab-fired blur event
More Query from same tag
- Calling useState hook in child - state data is empty
- Add onclick listener reactjs
- how to map this following api response in react js
- Javascript - React. Object's existing property shows undefined
- Warning react : setState(...): Can only update a mounted or mounting component
- Changing the z index of tooltip in chartjs-2
- Flux + React: when to keep state of visual components at store
- WithStyles<typeof styles> in Material UI?
- How to pass variable into react toastify?
- How to find latest 10 dates element from JSON object in React
- How to get past "Expected an assignment or function call and instead saw an expression" Error Javascript
- Access-Control-Allow-Origin in React JS on Meteor App
- How can I slide this React drawer from left to right
- ComponentDidMount redux-saga action not working
- How to solve the problem with types in NextJs (Typescript)?
- React.js Can I use array.map within componentDidMount() on an array returned from an axios request?
- create-react-app starting error - Error: No valid exports main found for '\node_modules\colorette'
- React Redux - How to access a structured selector from a static function?
- how to get multiple nearby locations based on rank using haversine reactjs
- Concatenate unicode and variable
- Dynamic Avatar using Material UI and React
- React Typescript with hooks : Maximum update depth exceeded error
- How To Store Value in Global Variable from onChange Function?
- React treats "{variable}" syntax as an object
- react testing library render component conditionally
- How to update Typography text on button click
- react-scripts test raises TypeError unrelated to the component being tested
- Sorting js object by using objects props (name)
- React Router Params not working
- SVG path point at lat and long rather than side of SVG