What is the best way to implement multiple file uploads in AngularJS?

Question

Django

There is a project, on one of the pages there is a form in which you need to fill in a set of fields (text + picture). Their number may vary. Accordingly, the set of fields is ngRepeat for the collection of objects:
{text: '...', img: '...'}
If everything is clear with the text, then I have questions with the "img" fields. These should be downloadable files (pictures), the preview is all bullshit, it’s not difficult to do this, how can you then upload this entire structure to the server via $http(), along with the files, without losing which file belongs to which text. I see the following option:
On change event of the file selection field, immediately upload it to the server, save the information in the database, and return the file identifier back. And store this identifier in the json structure. But something suggests that in a situation where the user made a mistake and uploaded the wrong file, then delete it somehow. All these are unnecessary operations that you want to avoid.
On the server I have Django, I get a request object in which files are stored in a separate request.FILES container, that is, something tells me that this cannot be stuffed into one JSON (or BASE64 DATA URL ????).
In short, I don’t know how best to organize a structured loading of all data.
Such a structure is given here only for simplicity, in fact, in addition to the collection of text-img objects, there is also a bunch of data, text, and I want to transfer all this garbage in one request to the server without losing the structure, so that it would be easier to sort it out on the server. How is it customary to design such operations?

Answer 1

First option:
Use FormData and add files as blobs after reading. More
Option 2:
Use Forms, no Angular
Option 3:
If the files are large, it's better to upload them separately and store the file identifiers separately. When saving data - do whatever is required. Deleting files - according to the schedule.