Мультистепформа с несколькими изображениями Django
Здравствуйте, я делаю мультистепформу на django, которая может добавлять несколько данных изображений (описание и изображение). Все мои мультистепформы в порядке и добавляются в базу данных, если у них нет кнопки add another entry button, как у моего медиа. Я хотел бы добавить несколько медиафайлов в базу данных. Как я могу этого добиться? Ниже приведены мои фрагменты кодов.
Модели
class IncidentMedia(models.Model):
incident_general = models.OneToOneField(IncidentGeneral, on_delete=models.CASCADE)
media_description = models.TextField(max_length=250, blank=True)
incident_upload_photovideo = models.ImageField(default='user.jpeg', upload_to='incident_report/image')
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
def __str__(self):
return self.id
Виды
HTML
<fieldset>
<h2 class="fs-title">Media</h2>
<div id="images">
</div>
<button type="button" name="add_image" id="add_image" class="add-report"><i class='bx bx-plus'> Add image</i> </button>
<br>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
Javascript
document.getElementById("add_image").onclick=function (ev) {
var image=document.getElementById("images");
var div_a = document.createElement('div');
div_a.className = 'form-row';
var div_b = document.createElement('div');
div_b.className = 'form-row';
var description=document.createElement("textarea");
description.className = 'form-control';
description.name="desc[]";
var newInput=document.createElement("input");
newInput.type="file";
newInput.name="file[]";
var br=document.createElement("br");
var br1=document.createElement("br");
image.appendChild(div_a);
div_a.appendChild(description);
image.appendChild(div_b);
div_b.appendChild(newInput);
}