Approaches for adding multiple image on a post Django - django

Question

I am working on a platform where I need to allow users to upload multiple images in one post.
I want to keep it as simple as possible, so that a person wouldn't have to refresh the page to upload each image, or create and save a post before adding images.
If a user could delete or reorder images it would be nice
Can you give me advice on how to do it properly?
I am using django , postgres and here's what I have done so far .
On my models.py -
class ImagePost(models.Model):
user = models.ForeignKey("profiles.HNUsers", on_delete=models.DO_NOTHING)
image = OptimizedImageField("Post Image", blank=True, null=True)
timestamp = models.DateTimeField("Timestamp", blank=True, null=True, auto_now_add=True)
text = models.TextField("Description text", blank=True)
class Meta:
verbose_name_plural = "Image Posts"
It can take one image just fine . what should I change to make it multi upload post
On my views.py this is what I have done so far -
#api_view(['POST'])
#permission_classes((permissions.AllowAny,))
def image_post(request):
if request.method == 'POST':
data = request.data
print(data)
serializer = ImagePostSerializer(data=data)
if serializer.is_valid():
serializer.save()
print("image object saved")
try:
image_post_object = ImagePost.objects.filter(user__id=data['user']).order_by('-timestamp')[0]
print(image_post_object)
try:
post = Posts()
post.user = HNUsers.objects.get(id=data['user'])
post.image_url = image_post_object.image.url
post.type = 'I'
post.category = data['category']
post.created_on = image_post_object.timestamp
post.text = image_post_object.text
save_post = post.save()
post_id = post.pk
try:
user = HNUsers.objects.get(pk=data['user'])
if user.user_type == 'HN':
payload = {
"user_name": user.full_name,
"image_url": user.profile_img_url,
"post_id": post_id,
"notification_type": "hn"
}
print(payload)
broadcast_notification('all', payload, 1)
except HNUsers.DoesNotExist:
print("user_id_does_not_exist")
print("post object created")
except Posts.DoesNotExist:
print("Failed - post creation failed")
except HNUsers.DoesNotExist:
print("Failed - user object not found")
except ImagePost.DoesNotExist:
print("Failed - image object not found")
return Response(serializer.data, status=status.HTTP_200_OK)
Any advice is really appreciated.

Answer 1

I am not sure if this can help, but why you dont use more than one table to store images in DB:
class Images(models.Model):
user = models.ForeignKey("profiles.HNUsers",
on_delete=models.DO_NOTHING)
image_post = models.ForeignKey(ImagePost, on_delete=models.CASCADE)
image = OptimizedImageField("Post Image", blank=True, null=True)
Now you have conected multiples images to a post and a user.
Hope this helps a bit...

Answer 2

Check this excellent django version of jQuery-File-Upload :
https://github.com/sigurdga/django-jquery-file-upload
Some features:
Drag and drop files
Select multiple files
Cancel upload
Delete uploaded file

Answer 3

You can avoid a lot of code repetition and add multiple images for a model by creating an intermediate model which will handle mapping between your image and the model. Create proper binding like one to one , you can look at this tutorial