How to automatize uploading files process in AngularJS?

Question

I'm just learning so forgive me if my question is transparent. Now I've got in controller:

$scope.fileUrl = 'test/data_1.zip';
$scope.fileName = 'myData';

In html:

<a href="{{fileUrl}}" download="{{fileName}}"> Download version 1 </a>

So, maybe tomorrow I'll add in folder test file data_2.zip... and then over and over again. Hence I will be forced to write almost the same line in the html & controller many times... How can I automatize that process? I hope what I have requested is possible, any help will be appreciated :)

chresse · Accepted Answer · 2016-06-23 16:52:38Z

3

you can store all your files in an array and iterate overthem with ng-repeat:

$scope.files = [{
        url: 'test/data_1.zip',
        name: 'myData'
    }, {
        url: 'test/data_2.zip',
        name: 'myData2'
    }, ... ];

in your html you write:

<a href="{{file.url}}" download="{{file.name}}" ng-repeat="file in files"> Download version 1 </a>

edited Jun 23, 2016 at 16:52

answered Jun 23, 2016 at 16:45

chresse

5,8873 gold badges35 silver badges50 bronze badges

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

Comments

theblindprophet · Accepted Answer · 2016-06-23 16:50:42Z

1

As long as your naming is consistent you use this:

HTML:

<div ng-repeat="a in array">
    <a href="test/data_{{$index+1}}.zip" download="{{fileName}}{{$index+1}}"> Download version {{$index + 1}} </a>
</div>

Controller:

var numberOfFiles = 12;
$scope.array = new Array(numberOfFiles);
$scope.fileName = 'myData';

You are creating "n" number of download links and only replacing the number at the end of the file. e.g. test/data_#.zip

Fiddle: http://jsfiddle.net/Lvc0u55v/5812/

answered Jun 23, 2016 at 16:50

theblindprophet

7,9577 gold badges44 silver badges60 bronze badges

2 Comments

impregnable fiend Over a year ago

Man, thank you too, it works for me. But @chresse was first :)

theblindprophet Over a year ago

No problem, use whatever suits your application best.

Collectives™ on Stack Overflow

How to automatize uploading files process in AngularJS?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related