Django, uploading images throwing 403 CSRF token missing error on Ajax call

Question

I am trying to upload multiple files using Django. The idea is that while creating a blog post the user can also add images to the post. I am using Ajax to submit the blog post, however, it seems that after adding the image form the "submit" button doesn't work and my post does not get created. I have already built two models, Images and Post. Below are my codes related to this functionality. My project name is register and images are in an app called 'home': (If I remove the image upload functionality the post is created successfully, so the ajax is working correctly)

my image model:

my post_creat view in home app views:

@login_required
def post_create(request):
    data = dict()
    if request.method == 'POST':
        image_form = ImageForm(request.POST, request.FILES or None)
        images = request.FILES.getlist('image')
        form = PostForm(request.POST)
        if form.is_valid() and image_form.is_valid():    
            post = form.save(False)
            post.author = request.user
            post.save()
            for i in images:
                image_instance = Images(image=i,post=post)
                image_instance.save()
            data['form_is_valid'] = True
            posts = Post.objects.all()
            posts = Post.objects.order_by('-last_edited')
            data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
        else:
            data['form_is_valid'] = False
    else:
        image_form = ImageForm
        form = PostForm      
    context = {
    'form':form,
    'image_form':image_form
    }
    data['html_form'] = render_to_string('home/posts/post_create.html',context,request=request)
    return JsonResponse(data)

my javascript code for handling the ajax request:

  $(document).ready(function(){

    var ShowForm = function(e){
        e.stopImmediatePropagation();
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType:'json',
            beforeSend: function(){
                $('#modal-post').modal('show');
            },
            success: function(data){
                $('#modal-post .modal-content').html(data.html_form);
            }
        });
        return false;
    };
    // change form to FormData
    // var form = $(this)
    // processData, contentType were removed
    var SaveForm =  function(e){
        e.stopImmediatePropagation();
        var data = new FormData($('form').get(0));
        $.ajax({
            url: $(this).attr('data-url'),
            type: $(this).attr('method'),
            data: data,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(data){
                if(data.form_is_valid){
                    $('#post-list div').html(data.posts);
                    $('#modal-post').modal('hide');
                } else {
                    $('#modal-post .modal-content').html(data.html_form)
                }
            }
        })
        return false;
    }

//create
$('.create-post-btn').click(ShowForm);
$('#modal-post').on("submit",".post-create-form",SaveForm)

//update
$('#post-list').on("click",".show-form-update",ShowForm);
$('#modal-post').on("submit",".update-form",SaveForm)

//delete
$('#post-list').on("click",".show-form-delete",ShowForm);
$('#modal-post').on("submit",".delete-form",SaveForm)
});

My post_create.html file:

<form method="POST" data-url="{% url 'home:post-create' %}" class="post-create-form" enctype="multipart/form-data">
    {% csrf_token %}
        <div class="modal-header">
            <h5 class="modal-title" >Create a Post</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    <div class="modal-body" style="overflow-y: auto;">
        {{ form|crispy }}
        <button type="button" id="show-image-upload-inputs" class="btn btn-sm mr-auto btn-primary pb-1">
            <span><i class="fas fa-camera"></i></span>
        </button>
        <div id="image-upload-div" class="mt-1" style="display: none;">
            <hr class="my-2">
            <p class="mx-2 text-muted small">Add up to four images to your post</p>
                <div class="d-flex flex-row justify-content-between px-1">
                    {{ image_form }}    
                </div>
        </div>
    </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Post</button>
    </div>
</form>

**the display hidden is just a javascript functionality to show the form when use clicks on the vamera button.

my image model:

class Images(models.Model):
    post = models.ForeignKey(Post,on_delete=models.CASCADE,related_name='images')
    image = models.FileField(upload_to=upload_to_uuid('media/post_images/'),verbose_name='Image')
    date_added = models.DateTimeField(auto_now_add=True)

my project (register) settings.py:

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

my project (register) urls.py;

urlpatterns = [
    #Has to be included for Forgot Password funcitonality on main page
    path('', include('django.contrib.auth.urls')), 
    path('admin/', admin.site.urls),    
    path('',views.user_login,name='user_login'),
    path('',include('main.urls'),name='main'), 
    url(r'^home/',include(('home.urls','home'), namespace='home'))

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT ) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

and my media folder is created at register/media

EDIT: I have changes my Ajax function and now I'm using FormData, however, I am getting a

Forbidden (CSRF token missing or incorrect.): /home/post/create/
[06/Apr/2020 01:18:53] "POST /home/post/create/ HTTP/1.1" 403 2513

Error,when I clikc on submit, however, I do have a csrf_token.How can I resolve this issue?

You need to use FormData when uploading files https://stackoverflow.com/a/21045034/548562 — Iain Shelvington, Apr 05 '20 at 02:23
Yes, I did see that my issue is how to process multiple ajax calls? Cause whatever I do it seems it's not working. Should I place the FormData processing in the success part of the initial Ajax function and make a separate view to add images to a post? @iain-shelvington — ashes999, Apr 05 '20 at 19:16

score 0 · Answer 1 · answered Apr 05 '20 at 05:15

Your Code Post Model Should be like this

class Post(models.Model):
    title=models.CharField(max_length=50)
    sub_title=models.CharField(default="This is the subtitle of the post ",max_length=150)
    content=models.TextField(max_length=4000)
    date_posted=models.DateTimeField(default=timezone.now)
    blog_image_1=models.ImageField(Blank=True,Null=True,upload_to='media')
    blog_image_2=models.ImageField(Blank=True,Null=True,upload_to='media')
    blog_image_3=models.ImageField(default='default.jpg',upload_to='media')
    author =models.ForeignKey(User,on_delete=models.CASCADE) 

    def __str__(self):
        return self.title

The media directory be like this

    MEDIA_ROOT=os.path.join(BASE_DIR,'media')
    MEDIA_URL='/media/'

And Html Be like

<body>
<div class="container">
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="'border-bottom mb-4">Post</legend>
            {{ form|crispy }}
         </fieldset>
        <div class="form-group">
            <button class="btn-outline-info" type="submit"> Submit</button>
        </div>
    </form>
</div>
</body>

And Use Class Base Views They More PowerFull

class PostCreateView(LoginRequiredMixin,CreateView):
    model = Post
    fields = ['title','sub_title','content','blog_image_1','blog_image_2','blog_image_2']


    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)

Django, uploading images throwing 403 CSRF token missing error on Ajax call

1 Answers1