Перебор нескольких полей загрузки файлов

У меня есть директива, которая по существу заполняет несколько отдельных полей входного файла другими элементами формы HTML. Сам механизм реализован через автоматическое заполнение массива количеством элементов, которые выталкиваются/извлекаются по мере добавления дополнительных полей файла. Это само по себе управляет массивом с числовым списком, который в идеале должен изменять имя/идентификатор каждого элемента (это также не работает, наличие { в атрибутах вызывает синтаксическую ошибку, нарушающую сценарий).

<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>

Когда отправка запущена, мне не ясно, как лучше всего заставить скрипт на стороне клиента выполнять итерацию по всем доступным полям как отдельной группе. наличие вызова переменной шаблона в имени/идентификаторе является важным броском, и если я смогу реализовать решение, которое масштабируется вверх без этой бельма на глазу, это было бы здорово. У меня уже есть идея о том, как я в конечном итоге буду хранить все данные поля (посредством итерационных вызовов POST REST — я работаю с очень устаревшим API), но для того, чтобы перейти к этому шагу, необходимо определить лучший подход для обработки нескольких записи полей. Какие-либо предложения?

Я должен уточнить, я использую ng-form-upload, чтобы помочь в задаче взаимодействия с данными в полях ввода файла.


javascript angularjs ng-file-upload
person Cameron Kilgore    schedule 06.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать массив для хранения вашей модели примерно так:

<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>

Затем, чтобы добавить еще один набор полей, вы можете поместить пустой объект в файлы, и массив файлов будет содержать все данные, которые необходимо отправить.

person danial    schedule 07.04.2016
comment
Я до сих пор не понимаю, как какие-либо изменения в измененном поле будут отображаться либо в файлах [{}], либо в методе ng-submit. Из моей реализации до сих пор он по-прежнему обрабатывает files[] как пустой массив, только с несколькими записями. Не могли бы вы пояснить эту часть логики? - person Cameron Kilgore; 08.04.2016
comment
Неважно, это была синтаксическая ошибка. Спасибо за ответ! - person Cameron Kilgore; 08.04.2016