0

I want to list all the files in <a></a> when clicking it we need to download it from the corresponding folder.

I tried the following code

<div ng-repeat="file in files"> 
 <a download="{{file.name}}" href="/path of the file">{{file.name}}</a> 
</div>

How can I achieve this?

Can anyone help me?

prince
  • 601
  • 6
  • 15
  • 30
  • It being "urgent" isn't important. What we need is How these files are pathed; and what isn't working currently. (When you click on a file in a link, it already downloads -- that's just the internet. What's not working with what you're trying to do in Angular? – George Stocker Mar 06 '14 at 13:40
  • I just read the directory and listed all the files in the view. But I don't know how to down load it. Please review the updated question. – prince Mar 06 '14 at 13:43
  • Could you show use your code? As it stands, the actual problem you're having is hard to discern. Already, because of the internet, if you properly link to a file that's available to download, the browser will try to download it when you click on it. What isn't working? – George Stocker Mar 06 '14 at 13:44
  • Does this already asked Stack Overflow question help you? http://stackoverflow.com/questions/16342659/angularjs-directive-to-create-adownload-button Also, shouldn't the "href" be an part of the `file` variable since it represents the file's path? – George Stocker Mar 06 '14 at 13:47
  • I setup a working example using your code on this [fiddle](http://jsfiddle.net/dYSTF/), the only difference (minus anything I can't see in your code) is that the href is set to `{{ file.path }}`, I think that might be where your issue is. – jnthnjns Mar 06 '14 at 14:07
  • Asok, But while clicking the anchor tag the pages is redirected to that link right. But my case is the page should be the same and the file should be downloaded. Also the files will be in the local machine. Here in the example you download it from internet – prince Mar 06 '14 at 14:52
  • @prince Having the `download` attribute in the `` tag does not redirect the user to the `href` location, it simply downloads what is at that location. *As long as the `href` tag has a direct link to an actual file it doesn't matter whether it is on a local machine or a server.* By local, I am assuming you mean that the file is stored on a local server or shared computer. – jnthnjns Mar 06 '14 at 15:31
  • @Asok: As far as i know the download attribute only set a readable name for a garbled filename. Look here:http://davidwalsh.name/download-attribute. Since file.name==file.name it's quiet useless here. I would try and see what happens. (Note the slash at end of the path.) I f it doesn't work, check the filename in the source with firebug, copy it to address bar and see if you get a file not found error. – mainguy Mar 06 '14 at 15:47
  • @mainguy I have no idea what you are trying to explain to me. The download attribute JUST declares a defined name for the file being downloaded, you don't even need to set the value. In my fiddle I just put it in there as full example. You could put `download="I have been downloaded"`, no extension required. – jnthnjns Mar 06 '14 at 15:53
  • Can't reach jsfiddle (like so often). I was just showing what works flawless at our sites. Also I have mistaken you for the OP, sorry! – mainguy Mar 06 '14 at 16:00
  • @prince since Asoks fiddle does not work (it only shows the image, not show a download dialog, since the filetype jpg is registered with every browser). I need to know what filetypes you want to offer for download and if you have any server sided language available php, node or else)? – mainguy Mar 06 '14 at 17:28
  • @mainguy BTW, I just found that even though I have read that Firefox supports `download` it appears to only display, in Chrome my fiddle works perfectly. IE doesn't support `download` and acts the same as Firefox. – jnthnjns Mar 06 '14 at 17:39

1 Answers1

2

If you have an anchor tag that you'd like to not be processed by angular, you'll need to use target="_self" or some other valid target.

See the $location documentation

This should work for you:

<div ng-repeat="file in files"> 
 <a target="_self" download="{{file.name}}" href="/path of the file">{{file.name}}</a> 
</div>

Another option may be to use the full path to the filename, but this doesn't seem to work in every case.

Here's a plunker with examples.

Joseph Yaduvanshi
  • 20,241
  • 5
  • 61
  • 69