Ad

How To Display The Uploaded Image Using Django And AJAX

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.

Ad

Answer

For 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 comment
                        }
                    });
                    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.

Ad
source: stackoverflow.com
Ad