Django Handling Multiple Image Uploads

I have a simple project that has two different models. One that handles a report and one that stores the images for each report connected by a ForeignKey:

class Report(models.Model):
    report_location = models.ForeignKey(Locations, on_delete=models.CASCADE)
    timesheet = models.ImageField(upload_to='report_images', default='default.png')
    text = models.CharField(max_length=999)
    report_date = models.DateField(auto_now=True)
    created_by = models.ForeignKey(User, on_delete=models.CASCADE)


    def __str__(self):
        return f"{self.report_location, self.report_date, self.created_by}"

class TimeSheetAndPics(models.Model):
    report = models.ForeignKey(Report, on_delete=models.CASCADE)
    report_images = models.ImageField(upload_to='report_images', default='default.png')
    date = models.DateField(auto_now=True)


    def __str__(self):
        return f"{self.report} on {self.date}"

My Goal is to have a user fill out the report and then upload multiple pictures, however i cannot figure out how to handle multiple image uploads.

I have two forms for each model:

class ReportCreationForm(ModelForm):
    class Meta:
        model = Report
        fields = [
            'report_location',
            'text',
        ]


class TimeSheetAndPicForm(ModelForm):
    report_images = forms.FileField(widget=ClearableFileInput(attrs={'multiple': True}))
    time_sheets = forms.FileField(widget=ClearableFileInput(attrs={'multiple': True}))

    class Meta:
        model = TimeSheetAndPics
        fields = [
            'time_sheets',
            'report_images',
        ]

And this is how i try to handle my views:

class NewReport(LoginRequiredMixin, View):
    def get(self, request):
        context = {
            'create_form': ReportCreationForm(),
            'image_form': TimeSheetAndPicForm(),
        }
        return render(request, 'rakan/report_form.html', context)

    def post(self, request):
        post = request.POST
        data = request.FILES or None
        create_form = ReportCreationForm(post)
        image_form = TimeSheetAndPicForm(post, data)

        if create_form.is_valid() and image_form.is_valid():
            clean_form = create_form.save(commit=False)
            clean_form.created_by = request.user
            clean_form.save()

            clean_image_form = image_form.save(commit=False)

            for images in clean_image_form:
                clean_image_form.report = clean_form
                clean_image_form.report = images

                clean_image_form.save()

            return redirect('rakan:rakan_index')

        return redirect('rakan:new-report')

I have tried to solve this in different ways but i unfortunately hit a wall. I cant seem to find a solution that actually works. My best try i was able to save only 1 image in the models instead of the 3 test images.

I dont believe it makes a difference but here is also the HTML File that uses the forms:

<div class="content-section">
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Create Report</legend>
            {{ create_form }}
            <br>
            {{ image_form }}
        </fieldset>
        <div class="form-group">
            <button class="btn btn-outline-info" type="submit">submit</button>
        </div>
    </form>
</div>

Anyone dealt with this problem would like to help me achieve a solution i would be very thankful. Thank you.

Back to Top