Bulk Image Upload with Details

Using Django Forms & APIs
1

I’ve figured out a few disparate pieces of this puzzle but I can’t seem to pull the threads together. This is for the admin panel of an artists website, she needs to be able to upload multiple images at once and add them to the Art model.

#urls.py
from django.contrib import admin
from django.urls import path

from .views import admin_edits, blog_editor, gallery_editor, user_control, calendar_events

app_name = 'editors'

urlpatterns = [
    ...
    path('gallery', gallery_editor, name='gallery_editor'),
    ...
]

#models.py
class Art(models.Model):
    title = models.CharField(max_length=100, unique=True)
    image = models.ImageField(upload_to='gallery/')
    short_description = models.CharField(max_length=100)
    description = models.TextField()
    for_sale = models.BooleanField()
    created_on = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

#views.py
from gallery.models import Art

...
def gallery_editor(request):
    if request.method == 'POST':
        for afile in request.FILES.getlist('uploaded_images'):
            Art.objects.create(
                title=afile['title'],
                short_description=afile['short_description'],
                for_sale=afile['for_sale'],
                creation_date=afile['creation_date'],
                description=afile['description'])
        return redirect('editors:gallery')

    return render(request, 'editors/gallery_editor.html')
...

#gallery_editor.html
<form method="post" action="" enctype="multipart/form-date">
    {% csrf_token %}
    <div class="form-row">
        <label for="image_upload">Upload Images</label>
        <input type="file" name="image_upload" accept="image/*" multiple>
    </div>
    <div class="form-row">
        <label for="title">Title</label>
        <input type="text" name="title" id="title" />    
    </div>
    <div class="form-row">
        <label for="short_description">Short Description</label>
        <input type="text" name="short_description" id="short_description" />
    </div>
    <div class="form-row">
        <label for="for_sale">For Sale?</label>
        <input type="checkbox" name="for_sale" id="for_sale" />
    </div>
    <div class="form-row">
        <label for="creation_date">Creation Date</label>
        <input type="date" name="creation_date" id="creation_date" />
    </div>
    <div class="form-row">
        <label for="description">Artist Description</label>
        <textarea></textarea>
    </div>
    <input type="submit" name="upload" value="Upload">
</form>

I need that form to be replicated for each image she’s selected, but don’t know how to do that without making her upload one at a time.

2

Django has a facility for cleanly working with multiple copies of the same form - formsets.

You can define how many instances are created when the form is being rendered, and you can add some JavaScript on the page to allow for the dynamic addition of additional instances.

(Note: I’ve commented elsewhere around here - I consider formsets to be one of the more complex topics to learn to use effectively. I found them extremely confusing at first.)

1 Like
3

that gives me a place to look though. I usually learn pretty quickly so we’ll see. Thanks :smiley: