pythondjangowagtail

How to add the multiple image uploading feature in Wagtail?


I am primarily working with Django, Wagtail, and API serializers, without using templates directly for HTML rendering. Instead of HTML templates, I use Django's and Wagtail's API features to render content.

Currently, I'm looking to add a new feature: multiple image uploading on the backend. Right now, with Wagtail, I can only upload a single image at a time. However, we need to modify this feature so that multiple images can be uploaded at the same time..

Let me clear my point my uploading a image. where the wagtail/images/muliple/add where user can add multiple images , but in default case we can only add one image at a time .What I need is for the ability to upload multiple images to be implemented in the default structure.

my code structure is like this:

======================================

blocks.py:

from wagtail.images.blocks import ImageChooserBlock
from wagtail.models import Site, Page
from cms.core.models import get_rootless_url_path
import re
from wagtail.images.models import Image
from wagtail.templatetags.wagtailcore_tags import richtext


class ImageChooserRenditionsAPIBlock(ImageChooserBlock):
    def get_api_representation(self, value, context=None) -> dict:
        from .serializers import ImageSerializer

        return ImageSerializer(value).data


class GreeterBlock(StructBlock):
    label = TextBlock()
    # description = TextBlock()
    description =CustomRichTextBlock(features=['h1', 'h2', 'h3', 'h4', 'h5', 'bold', 'italic', 'ol', 'ul', 'hr', 'link', 'image', 'code', 'blockquote'] )  
    image = ImageChooserRenditionsAPIBlock(required=False)
    video = CustomDocumentChooserBl`ock(required=False)
    cards = StreamBlock(
        local_blocks=(("cards", CardBlock()),),
        required=False,
    )


```
serializer.py:

class ImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = get_image_model()
        # fields = ("id", "title", "width", "height", "renditions")
        fields = ("id", "title", "width", "height", "file")

```

urls.py:

from django.urls import path, include
from wagtail import urls as wagtail_urls
from wagtail.admin import urls as wagtailadmin_urls
from wagtail.documents import urls as wagtaildocs_urls
from wagtail.api.v2.router import WagtailAPIRouter
from wagtail.documents.api.v2.views import DocumentsAPIViewSet
from wagtail.images.api.v2.views import ImagesAPIViewSet
from cms.meta import urls as meta_urls
from .views import CustomPagesAPIViewSet

api_router = WagtailAPIRouter("wagtailapi")
api_router.register_endpoint("pages", CustomPagesAPIViewSet)
api_router.register_endpoint("images", ImagesAPIViewSet)
api_router.register_endpoint("documents", DocumentsAPIViewSet)


urlpatterns = [
    path("", include(wagtailadmin_urls)),
    path("content/documents/", include(wagtaildocs_urls)),
    
]

api_urlpatterns = [
    path("", api_router.urls),
    path("meta/", include(meta_urls.urlpatterns)),
]

```


Solution

  • Excuse me, but the Wagtail CMS already has a feature to upload multiple images at once. Simply use the images interface. Click on "Add an image" and then you can use either the button to select multiple images (hold the [Shift] or [Ctrl] key to select multiple files in the widget) or just drag-and-drop your files onto the marked area. See screenshot attached. There might be no need for your custom upload feature, I guess.

    enter image description here