1

I have an Angular keystroke service that I am listening to keyboard keystrokes & performing actions based on the keystroke pressed.

I have a keyboard shortcut that I would like for it to open the file dialog, & the user should select a specific JSON file to upload, & then use this JSON data & convert to an object to use in the system.

The normal way of uploading a file is trough a HTML: <input type="file" />. However I am in a service and I don't need an input element, nor do I have where to put it. as I don't think a service should contain HTML.

How can I accomplish to trigger the file dialog box to open in a function & get the data of the selected JSON file that without an input and without downloading any external npm packages.

Improve this question
3
  • 2
    A common practice would be to dynamically add an input file field to the page and logically click it. Commented Feb 19, 2020 at 18:32
  • I don't think a service should deal with html, I would do so in a component but I want to avoid it in a service. Commented Feb 19, 2020 at 18:38
  • I don't think a service should deal with UI at all, and therefore should not be concerned with things like file dialog boxes, or keystrokes for that matter... Commented Feb 11, 2022 at 13:40

1 Answer 1

Reset to default
1

Unfortunately, <input type="file"> is a little bit special in HTML. You cannot generate such an event in JavaScript that would correspond clicking this input.

The only way to trigger this programmatically is to have a hidden UI component where this input is added and then the click triggered.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.