Как лучше реализовать загрузку множества файлов на AngularJS?
Есть проект, на одной из страниц есть форма, в оторой необходимо заполнять набор полей (текст+картинка). Их количество может изменяться. Соответственно набор полей это ngRepeat по коллекции объектов: {text: '...', img: '...'}
Если с текстом все понятно, то вот с полями "img" у меня воззникают вопросы. Это должны быть загружаемые файлы (картинки), предпросмотр вся фигня, это сделать не сложно, как потом можн озагрузить через $http() всю эту структуру на сервер, вместе с файлами, не потеряв какой файл к какому тексту относится. Я вижу следующий вариант:
При change событии поля выбора файла сразу загружать его на сервер, сохранять инфу в БД, и возвращать обратно идентификатор файла. И в json структуре хранить этот идентификатор. Но что-то подсказывает что при ситуации, когда пользователь ошибся, и загрузил не тот файл, потом его удалять каким-то образом. Все это лишние операции, которых хочется избежать.
На сервере у меня Django, я получаю request объект, в котором файлы хранятся в отдельном контейнере request.FILES, тоесть, что-то подсказывает, что в один JSON это не запихнуть (или BASE64 DATA URL ????).
Короче не знаю как лучше организовать структурированную загрузку всех данных.
Такая структура приведена здесь только для простоты, на самом деле помимо коллекции объектов text-img еще куча данных, текстовых, и хочется всю эту гапшу передать за один запрос на сервер не теряя структуры, чтоб проще было разгребать это на сервере. Как правильно принято проектировать такие операции?
Первый вариант:
Использовать FormData и добавлять файлы как блобы после чтения. Подробнее
Второй вариант:
Использовать формы, без ангуляра
Третий вариант:
Если объем файлов большой - лучше загружать отдельно и хранить идентификаторы файлов отдельно. При сохранении данных - делать все что потребуется. Удаление файлов - по расписанию.
Средний