Я изучаю Django и пытаюсь создать веб-сайт электронной коммерции. Я хочу создать систему, которая позволит пользователям загружать изображения в конкретный продукт в магазине, поэтому я попытался передать идентификатор продукта в параметре URL и попробоватьчтобы получить доступ к этому идентификатору из моего представления на основе классов, чтобы я мог добавить изображения к этому элементу, но у меня всегда была проблема с отображением, и я не могу понять, в чем проблема, Это мой код
urls.py
from django.urls import path
from item.views import ProgressBarUploadView
app_name = 'item'
urlpatterns = [
path('progress-bar-upload/<int:pk>/', ProgressBarUploadView.as_view(), name='progress_bar_upload'),
]
views.py
class ProgressBarUploadView(View):
def get(self, request, *args, **kwargs):
print(self.kwargs['pk']) # i want to print pk of product
photos_list = Photo.objects.all()
return render(self.request, 'zwwebsite/item_images_creation.html', {'photos': photos_list})
def post(self, request, *args, **kwargs):
time.sleep(1)
form = PhotoForm(self.request.POST, self.request.FILES)
if form.is_valid():
photo = form.save()
print(self.kwargs['pk']) # i want to print pk of product
data = {'is_valid': True, 'name': photo.file.name, 'url': photo.file.url}
else:
data = {'is_valid': False}
return JsonResponse(data)
models.py
class Photo(models.Model):
item = models.ForeignKey(Item, null=True,on_delete=models.CASCADE)
title = models.CharField(max_length=255, blank=True)
file = models.FileField(upload_to='media/item_image')
uploaded_at = models.DateTimeField(auto_now_add=True)
forms.py
class PhotoForm(forms.ModelForm):
class Meta:
model = Photo
fields = ('file', )
мой шаблон
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Photos Library - Simple is Better Than Complex{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.page-header {
margin-top: 0;
}
</style>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container">
<!--form method="post" action="">
{% csrf_token %}
<input type="hidden" name="next" value="{{ request.path }}">
<button type="submit" class="btn btn-danger pull-right">
<span class="glyphicon glyphicon-trash"></span> Clear Database
</button>
</form-->
<h1 class="page-header">
Photos
<small></small>
</h1>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Examples</h3>
</div>
<a href="{% url 'item:progress_bar_upload' %}" class="list-group-item{% if request.path == '/progress-bar-upload/' %} active{% endif %}">
Progress Bar Upload
</a>
</div>
</div>
<div class="col-md-9">
<div style="margin-bottom: 20px;">
<button type="button" class="btn btn-primary js-upload-photos">
<i class="fa fa-upload" aria-hidden="true"></i>
Upload photos
</button>
<input id="fileupload" type="file" name="file" multiple
style="display: none;"
data-url="{% url 'item:progress_bar_upload' %}"
data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
</div>
<table id="gallery" class="table table-bordered">
<thead>
<tr>
<th>Photo</th>
</tr>
</thead>
<tbody>
{% for photo in photos %}
<tr>
<td><img src="{{ photo.file.url }}" alt="{{ photo.file.name }}"></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Uploading...</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.ui.widget.js' %}"></script>
<script src="{% static 'js/jquery.iframe-transport.js' %}"></script>
<script src="{% static 'js/jquery.fileupload.js' %}"></script>
<script src="{% static 'js/progress-bar-upload.js' %}"></script>
</body>
</html>
Это ошибка, которая мне кажется
ссылка на изображение
Пожалуйста, помогите мне сделать это и решить эту проблему