The website and place of doubt is online, link below. I have cloned a git site and just added one File Field to the Models.py and to the Forms.py but, as you can test, it will refuse to accept that a file has been uploaded and will not post the form because it says the field is missing the file.
https://mysite-mayarodina.c9users.io/books/
The files in question>
models
from future import unicode_literals
from django.db import models
class Book(models.Model):
HARDCOVER = 1
PAPERBACK = 2
EBOOK = 3
BOOK_TYPES = (
(HARDCOVER, 'Hardcover'),
(PAPERBACK, 'Paperback'),
(EBOOK, 'E-book'),
)
title = models.CharField(max_length=50)
publication_date = models.DateField(blank=True, null=True)
author = models.CharField(max_length=30, blank=True)
price = models.DecimalField(max_digits=5, decimal_places=2)
pages = models.IntegerField(blank=True, null=True)
book_type = models.PositiveSmallIntegerField(choices=BOOK_TYPES, blank=True, null=True)
book = models.FileField("none.jpg")
the jquery that executes the code
$(function () {
/* Functions */
var loadForm = function () {
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-book .modal-content").html("");
$("#modal-book").modal("show");
},
success: function (data) {
$("#modal-book .modal-content").html(data.html_form);
}
});
};
var saveForm = function () {
var form = $(this);
$.ajax({
url: form.attr("action"),
data: form.serialize(),
type: form.attr("method"),
dataType: 'json',
success: function (data) {
if (data.form_is_valid) {
$("#book-table tbody").html(data.html_book_list);
$("#modal-book").modal("hide");
}
else {
$("#modal-book .modal-content").html(data.html_form);
}
}
});
return false;
};
/* Binding */
// Create book
$(".js-create-book").click(loadForm);
$("#modal-book").on("submit", ".js-book-create-form", saveForm);
// Update book
$("#book-table").on("click", ".js-update-book", loadForm);
$("#modal-book").on("submit", ".js-book-update-form", saveForm);
// Delete book
$("#book-table").on("click", ".js-delete-book", loadForm);
$("#modal-book").on("submit", ".js-book-delete-form", saveForm);
});
The views:
from django.shortcuts import render, get_object_or_404
from django.http import JsonResponse
from django.template.loader import render_to_string
from .models import Book
from .forms import BookForm
def book_list(request):
books = Book.objects.all()
return render(request, 'books/book_list.html', {'books': books})
def save_book_form(request, form, template_name):
data = dict()
if request.method == 'POST':
if form.is_valid():
form.save()
data['form_is_valid'] = True
books = Book.objects.all()
data['html_book_list'] = render_to_string('books/includes/partial_book_list.html', {
'books': books
})
else:
data['form_is_valid'] = False
context = {'form': form}
data['html_form'] = render_to_string(template_name, context, request=request)
return JsonResponse(data)
def book_create(request):
if request.method == 'POST':
form = BookForm(request.POST)
else:
form = BookForm()
return save_book_form(request, form, 'books/includes/partial_book_create.html')
The partial that contains the form
<form enctype="multipart/form-data" method="post" action="{% url 'book_create' %}" class="js-book-create-form">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create a new book</h4>
</div>
<div class="modal-body">
{% include 'books/includes/partial_book_form.html' %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create book</button>
</div>
</form>
