Iterating through multiple file upload fields

Question

I have a directive that essentially populates multiple individual input file fields, with other HTML form elements. The mechanism itself is done through auto-population an array with the number of elements, which is pushed/popped as more file fields are added. This itself, drives an array with a numerical list, that is ideally supposed to alter the name/id of each element (this also doesn't work, the presence of the { in the attributes causes a script-breaking syntax error).

<div ng-controller="MultiFileUpload">
    <form ng-submit="file_upload_multiple()" novalidate>
    <div class="upload_fields">
        <fieldset ng-repeat="Item in FileUploadItems">
        <input type="file" name="upload_file" id="upload_file_{{Item}}" ngf-select ng-model="filename_{{Item}}" ngf-max-size="2MB" required />
        <input type="text" name="filename" id="filename_{{Item}}" required/>
        <select name="filetype" id='filetype_{{Item}}' required>
            <option label="" value=""></option>
            <option label="Example Document 1" value="example_doc_1">Example 1</option>
            <option label="Example Document 2" value="example_doc_2">Example 2</option>
        </select>
        </fieldset>
    </div>

    <button>Save Files</button>
</div>

When the submit is fired, I am not clear on the best mechanism to have the client-side script iterate through all the available fields as a distinct group. having the template variable call in the name/id is a major throwoff, and If I can accomplish a solution that scales upward without this eyesore, that would be great. I already have an idea on how I'll eventually stash all the field data (through iterative POST REST calls -- i'm working with a very out of date API), but getting to that step requires determining the best approach to process multiple field entries. Any suggestions?

I should clarify, I am using ng-form-upload to assist in the task of interfacing with the data in the file input fields.

Answer 1

You can use an array to store your model something like this:

<div ng-controller="MultiFileUpload" ng-init="files = [{}]">
    <form ng-submit="file_upload_multiple()" novalidate>
    <div class="upload_fields" ng-repeat="fileData in files">
        <fieldset ng-repeat="Item in FileUploadItems">
        <input type="file" name="upload_file" ngf-select ng-model="fileData.file" ngf-max-size="2MB" required />
        <input type="text" name="filename" ng-model="fileData.name" required/>
        <select name="filetype" ng-model="fileData.type" required>
            <option label="" value=""></option>
            <option label="Example Document 1" value="example_doc_1">Example 1</option>
            <option label="Example Document 2" value="example_doc_2">Example 2</option>
        </select>
        </fieldset>
    </div>

    <button>Save Files</button>
</div>

Then to add another set of fields you can push an empty object into files and the files array will contains all the data that is needed to be submitted.