Please help! I uploaded multiple images but got only one

Using Django Mystery Errors
1

I uploaded multiple images but can only get one image upload instead of the multiple images and when i printed out in my console, i can see only one image and also i printed out my form validation and it says that my form is not valid.

Here are my codes;

models.py

from django.db import models

class ImageUpload(models.Model):
image = models.FileField(upload_to=‘images/’)
uploaded_at = models.DateTimeField(auto_now_add=True)

def __str__(self):
  return f"Image uploaded at {self.uploaded_at}"

views.py

from django.shortcuts import render, redirect
from .forms import ImageUploadForm
from .models import ImageUpload

def upload_images(request):
if request.method == ‘POST’:

form = ImageUploadForm(request.POST, request.FILES)
images = request.FILES.getlist('image')

if form.is_valid():
  print('Valid Form')
else:
  print('Form not Valid')
  
for img in images:
  print(img)
  ImageUpload.objects.create(image=img)
  return redirect('upload_images')

else:
form = ImageUploadForm()

images = ImageUpload.objects.all()
return render(request, ‘upload_images.html’, {‘form’: form, ‘images’: images})

forms.py

from django import forms
from .models import ImageUpload

class ImageUploadForm(forms.ModelForm):

image = forms.FileField(widget=forms.ClearableFileInput(attrs={‘multiple’: False})),

class Meta:
model = ImageUpload
fields = [‘image’]

upload_images.html

Upload Images

Upload Images

<form action="" method="post" enctype="multipart/form-data">
  
  {% csrf_token %}
  
  {{form.as_p}}

  <button type="submit">Submit</button>
</form>


<h2>Uploaded Images</h2>
<div>
    {% for image in images %}
      <img src="{{ image.image.url }}" alt="Image" style="max-width: 200px;"/>
    {% endfor %}
</div>
2

Please format your code properly and post your validation errors. Also, here is a helpful read for your to understand multiple image upload with django https://coffeebytes.dev/en/how-to-upload-multiple-images-in-django/

3

models.py

from django.db import models

class ImageUpload(models.Model):
  image = models.FileField(upload_to='images/')
  uploaded_at = models.DateTimeField(auto_now_add=True)

  def __str__(self):
    return f"Image uploaded at {self.uploaded_at}"

views.py

from django.shortcuts import render, redirect
from .forms import ImageUploadForm
from .models import ImageUpload

def upload_images(request):
  
  if request.method == 'POST':
    
    form = ImageUploadForm(request.POST, request.FILES)
    images = request.FILES.getlist('image')

    if form.is_valid():
      print('Valid Form')
    else:
      print('Form not Valid')
      
    for img in images:
      print(img)
      ImageUpload.objects.create(image=img)
      return redirect('upload_images')
   
  else:
    form = ImageUploadForm()
    
  images = ImageUpload.objects.all()
  return render(request, 'upload_images.html', {'form': form, 'images': images})

forms.py

from django import forms
from .models import ImageUpload

class ImageUploadForm(forms.ModelForm):

  image = forms.FileField(widget=forms.ClearableFileInput(attrs={'multiple': False})),

  class Meta:
    model = ImageUpload
    fields = ['image']

upload_images.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Upload Images</title>
</head>
<body>
  <h1>Upload Images</h1>
    
  <form action="" method="post" enctype="multipart/form-data">
      
    {% csrf_token %}

    {{form.as_p}}

    <button type="submit">Submit</button>

  </form>


  <h2>Uploaded Images</h2>
  
  <div>
    {% for image in images %}
      <img src="{{ image.image.url }}" alt="Image" style="max-width: 200px;"/>
    {% endfor %}
  </div>
</body>
</html>

validation Error Messages from the terminal

[22/Sep/2024 16:09:28] "GET /media/images/agent-1.jpg HTTP/1.1" 304 0
Form not Valid------(This is the validation error i set from the views)
mini-testimonial-2.jpg-------(uploaded only one image)
4

Your multi-image field can’t be the model field, it’s not one model. The file upload field must be a regular form field, and then you create the multiple instances of that model from the images in that field.

Also see the rest of the requirements with the example at File Uploads | Django documentation | Django

5

Thanks for your answer and I really appreciate. Please, make me understand better by providing the right code needed :pray:

I would really appreciate the more

6

Did you read any of the links we sent?!

Try to remove the extra comma after the image field definition:

and post your error or your question here. :slight_smile: