I am creating a form that allows a user to select a image and upload it using Django and AJAX. This process works fine but the problem is that the uploaded image isn't being displayed on the screen however I did specify a div for it.
These are the steps that I followed:
- Create a model that handle the uploaded image.
- Create a path for the function.
- Create the function that uploads the selected image.
- Create the template and AJAX function.
models.py:
class photo(models.Model):
title = models.CharField(max_length=100)
img = models.ImageField(upload_to = 'img/')
home.html:
<form method="POST" id="ajax" enctype="multipart/form-data">
{% csrf_token %}
Img:
<br />
<input type="file" name="img">
<br />
<br />
<button id="submit" type="submit">Add</button>
</form>
<h1> test </h1>
<div id="photo">
<h2> {{ photo.title }}</h2>
<img src="{{ photo.img.url }}" alt="{{ photo.title }}">
</div>
$('#ajax').submit(function(e) {
e.preventDefault();
var data = new FormData($('#ajax').get(0));
console.log(data)
$.ajax({
url: '/upload/',
type: 'POST',
data: data,
contentType: 'multipart/form-data',
processData: false,
contentType: false,
success: function(data) {
// alert('gd job');
$("#photo").html('<h2> {{'+data.title+'}}</h2> <img src="{{'+data.img.url+ '}}" alt="{{ photo.title }}">')
}
});
return false;
});
views.py:
def upload(request):
if request.method == 'POST':
if request.is_ajax():
image = request.FILES.get('img')
uploaded_image = photo(img = image)
uploaded_image.save()
photo=photo.objects.first()
# return render(request, 'home2.html')
return HttpResponse(photo)
I expect that after the user uploads the image and the image I stored in the database, the image must be displayed on the screen.
I am creating a form that allows a user to select a image and upload it using Django and AJAX. This process works fine but the problem is that the uploaded image isn't being displayed on the screen however I did specify a div for it.
These are the steps that I followed:
- Create a model that handle the uploaded image.
- Create a path for the function.
- Create the function that uploads the selected image.
- Create the template and AJAX function.
models.py:
class photo(models.Model):
title = models.CharField(max_length=100)
img = models.ImageField(upload_to = 'img/')
home.html:
<form method="POST" id="ajax" enctype="multipart/form-data">
{% csrf_token %}
Img:
<br />
<input type="file" name="img">
<br />
<br />
<button id="submit" type="submit">Add</button>
</form>
<h1> test </h1>
<div id="photo">
<h2> {{ photo.title }}</h2>
<img src="{{ photo.img.url }}" alt="{{ photo.title }}">
</div>
$('#ajax').submit(function(e) {
e.preventDefault();
var data = new FormData($('#ajax').get(0));
console.log(data)
$.ajax({
url: '/upload/',
type: 'POST',
data: data,
contentType: 'multipart/form-data',
processData: false,
contentType: false,
success: function(data) {
// alert('gd job');
$("#photo").html('<h2> {{'+data.title+'}}</h2> <img src="{{'+data.img.url+ '}}" alt="{{ photo.title }}">')
}
});
return false;
});
views.py:
def upload(request):
if request.method == 'POST':
if request.is_ajax():
image = request.FILES.get('img')
uploaded_image = photo(img = image)
uploaded_image.save()
photo=photo.objects.first()
# return render(request, 'home2.html')
return HttpResponse(photo)
I expect that after the user uploads the image and the image I stored in the database, the image must be displayed on the screen.
Share Improve this question edited Jul 13, 2019 at 1:34 new Q Open Wid 2,3332 gold badges21 silver badges38 bronze badges asked Jun 15, 2019 at 7:48 Django DgDjango Dg 976 silver badges20 bronze badges 14- You are trying to show the image as I suggested you that day. Check here:stackoverflow./questions/56493419/… check my answer properly you are doing a little mistake – chirag soni Commented Jun 15, 2019 at 8:17
- @chiragsoni yes you are right i tried your answer but it did not display it and i did not find the error . but i am suspecting that the error is in the success function – Django Dg Commented Jun 15, 2019 at 8:22
- You properly follow my answer you will be able to resolve it. Best of luck! – chirag soni Commented Jun 15, 2019 at 8:23
- @chiragsoni still did not find where is the error exactly because when i debug its working as it should without displaying the image. – Django Dg Commented Jun 15, 2019 at 9:02
- Bro I am really sorry but usually, people would like to answer and help you only when you will appreciate their answers right? I already spend my time to help you here:stackoverflow./questions/56493419/… but no appreciation from your side. Please make a habit of appreciating others to get the good answers always. It is for your benit only. – chirag soni Commented Jun 15, 2019 at 9:08
2 Answers
Reset to default 5For using ImageField you have to install Pillow
pip install pillow
Let's go through your code and modify it a little.
models.py
from django.db import models
# Create your models here.
class Photo(models.Model):
title = models.CharField(max_length=100) # this field does not use in your project
img = models.ImageField(upload_to='img/')
views.py I splitted your view into two views.
from django.shortcuts import render
from django.http import HttpResponse
from .models import *
import json
# Create your views here.
def home(request):
return render(request, __package__+'/home.html', {})
def upload(request):
if request.method == 'POST':
if request.is_ajax():
image = request.FILES.get('img')
uploaded_image = Photo(img=image)
uploaded_image.save()
response_data = {
'url': uploaded_image.img.url,
}
return HttpResponse(json.dumps(response_data))
urls.py
from django.urls import path
from .views import *
from django.conf.urls.static import static
from django.conf import settings
app_name = __package__
urlpatterns = [
path('upload/', upload, name='upload'),
path('', home, name='home'),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
settings.py
MEDIA_URL = '/img/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'img')
home.html
{% load static %}
<html>
<head>
<script src="{% static 'photo/jquery-3.4.1.js' %}"></script>
<script>
$(document).ready(function() {
$('#ajax').submit(function(e) {
e.preventDefault(); // disables submit's default action
var data = new FormData($('#ajax').get(0));
console.log(data);
$.ajax({
url: '/upload/',
type: 'POST',
data: data,
processData: false,
contentType: false,
success: function(data) {
data = JSON.parse(data); // converts string of json to object
$('#photo').html('<img src="'+data.url+ '" />');
// <h2>title</h2> You do not use 'title' in your project !!
// alt=title see previous ment
}
});
return false;
});
});
</script>
</head>
<body>
<form method="POST" id="ajax">
{% csrf_token %}
Img:
<br />
<input type="file" name="img" />
<br />
<br />
<button id="submit" type="submit">Add</button>
</form>
<h1> test </h1>
<div id="photo"></div>
</body>
</html>
Do not use template variables in javascript {{'+data.title+'}} ! Send a string to HttpResponse() as an argument, in return HttpResponse(photo) photo is an object.
For multiple forms:
views.py
def home(request):
context = {
'range': range(3),
}
return render(request, __package__+'/home.html', context)
home.html
{% load staticfiles %}
<html>
<head>
<script src="{% static 'photo/jquery-3.4.1.js' %}"></script>
<script>
$(document).ready(function() {
$('.ajax').each(function () {
$(this).submit(function (e) {
e.preventDefault(); // disables submit's default action
var data = new FormData($(this).get(0));
var imageForm = $(this);
$.ajax({
url: '/upload/',
type: 'POST',
data: data,
processData: false,
contentType: false,
success: function(data) {
data = JSON.parse(data); // converts string of json to object
imageForm.parent().find('.photo').html('<img src="'+data.url+ '" />');
console.log(imageForm);
}
});
return false;
});
});
});
</script>
</head>
<body>
{% for i in range %}
<div style="border: 1px solid black">
<form method="POST" class="ajax">
{% csrf_token %}
<div class="upload-label">Img-{{ i }}:</div>
<input type="file" name="img" />
<br />
<br />
<button class="submit" type="submit">Add</button>
</form>
<div class="image-label"> Image: </div>
<div class="photo">No image yet</div>
</div>
{% endfor %}
</body>
</html>