Django/React/Axios Попытка создать галерею изображений

У меня есть веб-приложение для группы выпускников, которое управляет событиями, стипендиями и т. д. У меня есть модели и веб-страницы для отображения всех деталей события, но я пытаюсь разрешить пользователю загружать несколько изображений для определенного события. Каждое событие имеет идентификатор и другие поля, а галерея имеет изображение и внешний ключ к идентификатору события, поэтому изображения с event_id 3 присваиваются событию с идентификатором 3 и т.д. На данный момент у меня есть все остальные поля для отображения с моими api урлами, потребляемыми axios (рисунки ниже). Я могу успешно загрузить все изображения в событие в бэкенде django. Я хотел бы отобразить эти изображения внизу справа под картинками события. С модалами для их увеличения я разберусь позже.

Страница подробностей моих событий.

Страница подробностей

Аксиос урлы

import axios from "axios";

const apiUrl = "/accounts/register/";
const loginUrl = "/accounts/login/"
const eventUrl= "/main/api/event/";
const eventGalleryUrl = "/main/api/gallery/?search=";

// Auth
export const signup = (user)=>{
    return axios.post(apiUrl,user)
}

export const login = (user)=>{
    return axios.post(loginUrl,user,{},{auth:user});
}

// Gallery 
export const getGalleryByEventId = (id) => {
  return axios.get(`/main/api/gallery/?search=${id}/`);
};

export const getGallery= ()=>{
    return axios.get(`${eventUrl}`)
}
export const createGallery = (eventObject)=>{
    return axios.post(eventUrl,eventObject);
}
export const getGalleryById = (id) => {
  return axios.get(`${eventUrl}${id}/`);
};
export const deleteGalleryById = (id) => {
  return axios.delete(`${eventUrl}${id}/`);
};
export const updateGalleryById = (id, eventObject) => {
  return axios.put(`${eventUrl}${id}/`, eventObject);
};



// Events 
export const getEvents = ()=>{
    return axios.get(`${eventUrl}`)
}
export const createEvent = (eventObject)=>{
    return axios.post(eventUrl,eventObject);
}
export const getEventById = (id)=>{
    return axios.get(`${eventUrl}${id}/`);
}
export const deleteEventById = (id)=>{
    return axios.delete(`${eventUrl}${id}/`);
}
export const updateEventById = (id, eventObject)=>{
    return axios.put(`${eventUrl}${id}/`,eventObject);
}

Модели

from django.db import models
from datetime import date
from accounts.models import User
from .states import CONTIGUOUS_STATES

class Event(models.Model):
    event_name = models.CharField(max_length=150)
    date = models.CharField(max_length=40)
    time = models.CharField(max_length=40,null=True, blank=True)
    address_line = models.CharField(max_length=250, null=True, blank=True)
    city = models.CharField(max_length=150, blank=True, null=True, default=None)
    state = models.CharField(max_length=25, default=None)
    zip_code = models.CharField(max_length=150)
    contact_name = models.CharField(max_length=150, blank=True, null=True, default=None)
    contact_number = models.CharField(max_length=150, blank=True, null=True, default=None)
    contact_email = models.EmailField(max_length=150, blank=True, null=True, default=None)
    banner_image = models.FileField(upload_to='media/Event Media', null=True, blank=True, default='EventBannerDefault.jpg') 
    
    description = models.TextField(max_length=2500)
    # rsvpd_members = models.ManyToManyField(User, blank=True)
    registration_fees = models.CharField(max_length=150, null=True, blank=True)

    def __str__(self):
      return(self.event_name)

class Gallery(models.Model):
    images = models.FileField(upload_to='media/Event Media',)
    event = models.ForeignKey(Event, default=None, on_delete=models.CASCADE)

    def __str__(self):
        return (self.images)

Вернуться на верх