Added basic image upload, added view for images

- Added Image model
- Added graphql query for images
- Added image upload api on url upload/
- Added image serving on url images/*.*

Author: Moskas

.gitignore

@@ -3,3 +3,4 @@
 .direnv/
 venv/
 blog/migrations/*
+media/

backend/settings.py

@@ -11,10 +11,12 @@
 """
 
 from pathlib import Path
+import os
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
-
+MEDIA_ROOT = os.path.join(BASE_DIR, "media")
+MEDIA_URL = "/"
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
@@ -25,7 +27,7 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ["localhost"]
 
 
 # Application definition

backend/urls.py

@@ -17,16 +17,24 @@
 from django.contrib import admin
 from django.urls import path
 
+from django.conf import settings
+from django.conf.urls.static import static
+
 from django.views.decorators.csrf import csrf_exempt
 from graphene_django.views import GraphQLView
 
 from blog.feeds import RssTutorialsFeeds
-from blog.views import TutorialListView, TutorialDetailView
+from blog.views import TutorialListView, TutorialDetailView, upload_image, image_view
 
 urlpatterns = [
     path("admin", admin.site.urls),
     path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True))),
     path("feed", RssTutorialsFeeds(), name="tutorial_feed"),
     path("<slug:slug>", TutorialDetailView.as_view(), name="tutorial_detail"),
     path("", TutorialListView.as_view(), name="tutorial_list"),
+    path("upload/", upload_image, name="upload_image"),
+    path("images/<str:image_name>", image_view, name="image_view"),
 ]
+
+if settings.DEBUG:
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

blog/admin.py

@@ -1,6 +1,6 @@
 from django.contrib import admin
 
-from blog.models import Profile, Post, Tag
+from blog.models import Profile, Post, Tag, Image
 
 
 @admin.register(Profile)
@@ -50,3 +50,10 @@ class PostAdmin(admin.ModelAdmin):
     }
     date_hierarchy = "publish_date"
     save_on_top = True
+
+
+@admin.register(Image)
+class ImageAdmin(admin.ModelAdmin):
+    model = Image
+
+    list_display = ("id", "name", "Main_Img")

blog/models.py

@@ -22,6 +22,15 @@ def __str__(self):
         return self.name
 
 
+class Image(models.Model):
+    name = models.CharField(max_length=50)
+    alt_text = models.CharField(max_length=100)
+    Main_Img = models.ImageField(upload_to="images/")
+
+    def __str__(self):
+        return self.name
+
+
 class Post(models.Model):
     class Meta:
         ordering = ["-publish_date"]

blog/schema.py

@@ -25,10 +25,16 @@ class Meta:
         model = models.Tag
 
 
+class ImageType(DjangoObjectType):
+    class Meta:
+        model = models.Image
+
+
 class Query(graphene.ObjectType):
     all_posts = graphene.List(PostType)
     all_tags = graphene.List(TagType)
     all_authors = graphene.List(AuthorType)
+    all_images = graphene.List(ImageType)
     latest_posts = graphene.List(PostType)
     author_by_username = graphene.Field(AuthorType, username=graphene.String())
     post_by_slug = graphene.Field(PostType, slug=graphene.String())
@@ -37,7 +43,9 @@ class Query(graphene.ObjectType):
     posts_by_id = graphene.List(PostType, id=graphene.ID())
 
     def resolve_all_posts(root, info, order_by=None):
-        return models.Post.objects.prefetch_related("tags").select_related("author").all()
+        return (
+            models.Post.objects.prefetch_related("tags").select_related("author").all()
+        )
 
     def resolve_all_tags(root, info):
         return models.Tag.objects.all()
@@ -75,7 +83,14 @@ def resolve_posts_by_id(root, info, id):
         return models.Post.objects.filter(id=id)
 
     def resolve_latest_posts(root, info):
-        return models.Post.objects.prefetch_related("tags").select_related("author").order_by("-id")[:5]
+        return (
+            models.Post.objects.prefetch_related("tags")
+            .select_related("author")
+            .order_by("-id")[:5]
+        )
+
+    def resolve_all_images(root, info):
+        return models.Image.objects.all()
 
 
 schema = graphene.Schema(query=Query)

blog/views.py

@@ -1,15 +1,51 @@
-from django.shortcuts import render
+# from django.shortcuts import render
 from django.views.generic import ListView, DetailView
+from django.http import JsonResponse, HttpResponse
+from django.views.decorators.csrf import csrf_exempt
+
+
+from .models import Post, Image
+
 
-from .models import Post
 # Create your views here.
 class TutorialListView(ListView):
     model = Post
-    context_object_name = 'tutorial_list'
-    template_name = 'tutorials/tutorial_list.html'
+    context_object_name = "tutorial_list"
+    template_name = "tutorials/tutorial_list.html"
 
 
-class TutorialDetailView(DetailView): 
+class TutorialDetailView(DetailView):
     model = Post
-    context_object_name = 'tutorial'
-    template_name = 'tutorials/tutorial_detail.html'
+    context_object_name = "tutorial"
+    template_name = "tutorials/tutorial_detail.html"
+
+
+# @csrf_exempt  # Note: Only for simplicity, use proper CSRF protection in production
+def upload_image(request):
+    if request.method == "POST":
+        # image_name = request.POST.get("image_name")
+        image_file = request.FILES.get("image_file")
+        alt_text = request.POST.get("alt_text")
+
+        if not image_file or not alt_text:
+            return JsonResponse(
+                {"error": "Please provide all required fields"}, status=400
+            )
+
+        # Create a new Image instance
+        new_image = Image(name=image_file.name, alt_text=alt_text, Main_Img=image_file)
+        new_image.save()
+
+        return JsonResponse({"message": "Image uploaded successfully"})
+    else:
+        return JsonResponse({"error": "Only POST requests are allowed"}, status=405)
+
+
+def image_view(request, image_name):
+    try:
+        image = Image.objects.get(name=image_name)
+        with open(image.Main_Img.path, "rb") as img_file:
+            response = HttpResponse(img_file.read(), content_type="image/jpeg")
+        return response
+    except Image.DoesNotExist:
+        return HttpResponse("Image not found", status=404)

flake.nix

@@ -17,6 +17,7 @@
           python311Packages.djangorestframework
           python311Packages.graphene-django
           python311Packages.django-cors-headers
+          python311Packages.pillow
         ];
       };
     };