How to open a file from local drive - Angular 4

Question

I am trying to open the file available in local drive directly using the angular application with whatever the editor the system is associated with.

Html

<a href="file:///C:/Users/Public/Pictures/Sample%20Pictures/Desert.jpg">  
<span  (click)="openFile(parameter)">Open file</span></a>

I have also tried using the below approach with no help.

window.open("file:///C:/Users/Public/Pictures/Sample%20Pictures/Desert.jpg")

But I am getting the following error message in browser console:

Not allowed to access local resource

I understand that we cannot directly access the local drive files directly using the angular application.

Is there any way round to open any type of file(like jpg, docx, txt, etc)?

I know its a common issue and definitely, your answers will help lot of people.

Thanks in advance.

1) Include them in your angular application's assets; or 2) serve the files from a local or remote web server. — Robby Cornelissen
– Robby Cornelissen, Commented Aug 13, 2018 at 9:42
Host the file on a web server and ajax it. Under normal conditions, jaavscript has no programmatical access to the users hard drive. Imagine what kind of malice could be done if it was possible. — Shilly
– Shilly, Commented Aug 13, 2018 at 9:43
i think you are using chrome may be chrome local file security issue will help — vikscool
– vikscool, Commented Aug 13, 2018 at 9:43

ImAtWar · Accepted Answer · 2020-07-31 17:58:46Z

4

you can load files from the client machine using Javascript FileReader object

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  template: `<input id="preview" type="file" (change)="previewFile($event)" />`
})
export class AppComponent implements OnInit {
  ...
  public previewImage(event) {
    const reader = new FileReader();
    reader.onload = (e: any) => {
      console.log('csv content', e.target.result);
    };
    reader.readAsDataURL(event.target.files[0]);
  }
}

edited Jul 31, 2020 at 17:58

ImAtWar

1,1533 gold badges12 silver badges25 bronze badges

answered Aug 13, 2018 at 9:49

mittal bhatt

1,0197 silver badges13 bronze badges

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

Comments

Barr J · Accepted Answer · 2018-08-13 09:46:05Z

0

If you are using chrome then chrome specifically blocks local file access this way for security reasons.

there is a workaround for this that can be found here How to set the allow-file-access-from-files flag option in Google Chrome

answered Aug 13, 2018 at 9:46

Barr J

11k2 gold badges31 silver badges49 bronze badges

Comments

Antoine V · Accepted Answer · 2018-08-13 10:03:18Z

0

As the answer of Barr J, it's due to the security reason of Chrome.

I used a simple extension serve server "Web Server for Chrome".

You choose the folder (C:\images) and launch the server on your desired port. Now access your local file by:

function run(){
   var URL = "http://127.0.0.1:8887/image.jpg";    
   window.open(URL, null);    
}
run();

answered Aug 13, 2018 at 10:03

Antoine V

7,1942 gold badges14 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to open a file from local drive - Angular 4

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related