Set the file path for an input in angular

Question

I have successfully created a FileReader() instance and can read the text files on file change. But what I need is; without using the input button to select a file, all I have to do is to place the path in an input textbox and read its contents. Please see my code below.

.ts file

fileChanged(e: any) {
    this.file = e.target.files[0];
    this.readDocument();
  }

  readDocument() {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      console.log(fileReader.result);
    }
    fileReader.readAsText(this.file);
  }

.html

<div class="Block">
  <label id="lbl">Code </label>
  <input type='file' (change)="fileChanged($event)">
</div>

If fileReader is not a viable option, can you please show me how to do this using another way? Thank you.

Simon K · Accepted Answer · 2019-04-07 20:16:34Z

3

If I understand correctly, you wish to show the path to the file? That would not be feasible, as javascript cannot read the file system on the user's computer, as that would be a major security flaw.

You would only be able to access the file name and its contents.

Keep in mind this can be done when we're in the context of a serverside script in scenarios using node.js or other serverside frameworks. Also when running things like gulp to do things like build scss into css.

answered Apr 7, 2019 at 20:16

Simon K

2301 gold badge3 silver badges11 bronze badges

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

7 Comments

Ibanez1408 Over a year ago

I need to access the contents without selecting the input button. All I have to do is place the path in an input box and as soon as I press a button, it will read the contents of the text file.

Simon K Over a year ago

So a user adds a file, and you then want to display the filename in an input field, and then when they press a button show the file contents?

Ibanez1408 Over a year ago

Am sorry for the confusion. It's like this. A file is in a network. I need to access it by putting in the file path in a text box, as soon as I click a button, I should be able to see the contents of the text file in a text area. I do not want to use an input button to select the file. I just want to place it in a textbox.

Simon K Over a year ago

So the files are not locally on the user's device, but on some server?

Simon K Over a year ago

Well in that case, the problem described in the original answer still stands. You cannot read the file system using javascript in the browser, since it would be a security flaw by design. It sounds like you need to access it with a GET request over http somehow.

|

Collectives™ on Stack Overflow

Set the file path for an input in angular

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related