CODEWITHSUNDEEP
javascriptangularjsfile-handling
Abdullah Abubakar Chishti
Abdullah Abubakar Chishti

Reputation: 43

Download file from another directory AngularJS

I'm working on an angularJS project and I have to trigger a download of a .txt file when the user clicks the download button. But the file is present in another directory

 <a ng-if="ErrorReport && ErrorMessage" href="../../C:\Users\Ali\Pictures\{{ErrorReport}}.txt"
           class="btn btn-primary"
           download>
            Download error report
        </a>

The text file (to be downloaded) is an error report which is created by the API on run-time so it would always have a dynamic name that's why I have used{{ErrorReport}} in the href

Any idea how I could give it the reference to a text file outside the app's directory?

Upvotes: 1

Views: 2172

Answers (2)

Aman sharma
Aman sharma

Reputation: 224

Use ng-href instead of href in your html along with giving the absolute path what browser understands. ng-href will help to bind the scope content.

 <a ng-if="ErrorReport && ErrorMessage" ng-href="file:///C:/Users/Ali/Pictures/{{ErrorReport}}.txt"
           class="btn btn-primary"
           download>
            Download error report
        </a>

But it wont solve your issue completely. You are trying to access a local resource from your browser. For this you need to allow your browser to access your local files.

Go to Chrome executable and then run below cmd

.\chrome.exe --allow-file-access-from-files

Now you can access files from your local but again its Dangerous.

It will leave your file system open for access from browser. Documents originating from anywhere have any access to local file:/// resources.

Better you run an instance of server in the folder your file is present and access that file like http://localhost:8080/file.txt.

You can use chrome extension 200 OK for that or you can install http-server globally using node's package manager like

npm install -g http-server

and from your command prompt you can start server like

C:\Users\Ali\Pictures> http-server

Hope this will solve your problem!!

Upvotes: 1

Ferus7
Ferus7

Reputation: 727

Try this:

href="file:///C:\Users\Ali\Pictures\{{ErrorReport}}.txt"

Your were using a relative path syntax with an absolute one,

so my example is using the correct absolute path

Upvotes: 0

Related Questions