How to update new image in django
How to remove old image and update / upload new image in django.
We have inserted and fetched the image in the previous posts. Let's write the code to edit and update new image.
In the index.html template, we will give the url to edit the image as shown below:
<td>
<a href="{% url 'edit-prod' p.id %}" class="btn btn-success badge">EDIT</a>
</td>
Then create the path in the urls.py file as shown below :
path('edit-product/<str:pk>', views.editProduct, name="edit-prod"),
We are passing the id as pk in the url and we will filter the record using the id. In the views.py file, create a editProduct function and add the below code:
def editProduct(request, pk):
prod = Item.objects.get(id=pk)
if request.method == "POST":
if len(request.FILES) != 0:
if len(prod.image) > 0:
os.remove(prod.image.path)
prod.image = request.FILES['image']
prod.name = request.POST.get('name')
prod.description = request.POST.get('description')
prod.price = request.POST.get('price')
prod.save()
messages.success(request, "Product Updated Successfully")
return redirect('/')
context = {'prod':prod}
return render(request, 'products/edit.html', context)
Open the edit.html file and paste the below code:
{% extends 'products/layouts/main.html' %}
{% block content %}
<section class="section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2 class="fw-bold">Edit Product</h2>
</div>
<div class="card-body">
<form action="" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="mb-3">
<label for="" class="form-label">Name</label>
<input type="text" Required name="name" value="{{ prod.name }}" class="form-control">
</div>
<div class="mb-3">
<label for="" class="form-label">Descritpion</label>
<input type="text" Required name="description" value="{{ prod.description }}" class="form-control">
</div>
<div class="mb-3">
<label for="" class="form-label">Price</label>
<input type="text" Required name="price" value="{{ prod.price }}" class="form-control">
</div>
<div class="mb-3">
{% if prod.image %}
<img src="{{ prod.image.url }}" alt="image here" class="prod-size">
{% endif %}
<label for="" class="form-label">Image</label>
<input type="file" name="image" class="form-control">
</div>
<button type="submit" class="btn btn-warning">Update</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock content %}
Watch the video given above for detailed explaination and video demo.