How to access any .json from windows file explorer in vuejs

Question

I looked up how to access a .json file without saving it to my code base but was not able to find it - all posts are like this one: How to acces external json file objects in vue.js app where they assumed that I could save the .json file in the code base like so: import json from './json/data.json' - they are going to call it json, it is in json folder from the file named data.json.

In my case, on the contrary, when the user tries to read their own .json file saved in their windows file explorer's "Download" folder, there can be one or multiple files, and the user will select any one of them to be accessed and read by the website.

Me as a developer don't own the file that the user will select, don't know which file the user will choose, therefore don't know the name of the file or the file content, and so, I cannot have that file saved in the code base.

Is there a way for me to enable the user to select any .json file they want, have that accessed and read? Thank you.

UPDATE: from the suggestions from the comment section, fileSelector appears as null in the dev tool

<input type="file" id="file-selector" accept="application/JSON" multiple>
interface HTMLInputEvent extends Event {
  target: HTMLInputElement & EventTarget;
}
mounted() {
    const fileSelector = document.getElementById('file-selector');
    fileSelector.addEventListener('change', (event: HTMLInputEvent) => {
      let files: any = event.target.files[0];
      const fileList = event.target.files;
      console.log(fileList);
    });
}

Does [this](https://stackoverflow.com/a/372333/12701949) answer your question? — Daniel_Knights, Aug 10 '20 at 13:07
I suppose you read this page, which is what the solution in your link suggests: https://web.dev/read-files/#select-input When I enter `this.fileSelector.addEventListener('change', (event) => {const fileList = event.target.files; });`, it gives me an error `Property 'files' does not exist on type 'EventTarget'.` How can I fix this issue? — Nathan Bell, Aug 10 '20 at 13:33
If I understand the question, you could simply add an input field with the appropriate accepted file type: `` — vchan, Aug 10 '20 at 13:35
@NathanBell that code should work fine if attached to a file input. Are you sure `this.fileSelector` is an HTML file input? — Daniel_Knights, Aug 10 '20 at 13:40
The image you attached does not look like you're selecting the input correctly. Move it inside the `mounted` hook as a `const` variable, then it should work — Daniel_Knights, Aug 10 '20 at 13:42
Regardless the screenshot, is it possible that you could update the question with that piece of code as text? — vchan, Aug 10 '20 at 14:04
@Daniel_Knights `fileSelector` appears to be null here, any suggestions on how to fix this? — Nathan Bell, Aug 10 '20 at 16:11
Sorry @NathanBell, I don't have any experience with typescript so I can't really help you with what you have. — Daniel_Knights, Aug 10 '20 at 16:22

score 0 · Answer 1 · answered Aug 10 '20 at 14:58

Apparently you're using Typescript, so your error is at runtime or at build time? the type of the event argument doesn't seem correct to me, try:

fileSelector.addEventListener('change', (event: Event) => {
  const files = (e.target as HTMLInputElement).files
})

How to access any .json from windows file explorer in vuejs

1 Answers1