di sini ane udah ada sample proyek . nama proyeknnya hello_project dan nama aplikasinya app_upload. jadi skenario ane di sini mau ngupload file make ajax. ane asumsikan ane udah nge-migrate model-model yanga ne perluin.
# app_upload/models.py
from django.db import models
class Document(models.Model):
document_data = models.FileField(upload_to='uploads/')
def __str__(self):
self.document_data.namebagi yang baru bikin model jangan lupa untuk menyertakan aplikasi ke INSTALLED_APPS di file settings.py:
INSTALLED_APPS = (
# ...
'app_upload',
)jangan lupa di migrate loh !
hal yang pertama mesti kita lakuin adalah membuat direktori static terlebih dahulu. buat struktu direktori dan file buat nyimpen file-file static di aplikasi kita seperti di bawah ini:
app_upload/
-- static/
abis itu, download JQuery dan masukin ke direktori app_upload/static. setelah itu buat file lagi bernama ajax.django.js isi kode di bawah ini ke dalam file tersebut:
// menggunakan jQuery
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
// jQuery.trim(cookies[i]) tidak bekerja
var cookie = cookies[i].trim();
// Apakah Cookie string ini dimulai dengan nama yang kita inginkan ?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
(function($) {
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// metode HTTP ini tidak memerlukan protection CSRF
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
});Ingetin fungsi getCookie nanti buat kita panggil di file javascript yang kita gunakan untuk ajax request nya. oke sekarang kita buat template dulu. buat struktur direktori dan file template buat aplikasi kita seperti berikut:
app_upload (APLIKASI KITA)/
templates/
└── app_upload
├── base.html
└── document
└── upload.html
Buka file base.html trus isi dengan kode berikut ini:
{% load staticfiles %}
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}
{% endblock %}
<script src="{% static 'jquery.min.js' %}"></script>
<script src="{% static 'ajax.django.js' %}"></script>
<script>
$(document).ready(function() {
{% block domready %}
{% endblock %}
});
</script>
</body>
</html>selanjutnya buka file document/upload.html dan isi dengan kode di bawah ini:
{% extends "app_upload/base.html" %}
{% block title %}{% endblock %}
{% block content %}
<form method="post" enctype="multipart/form-data" id="upload_id" action="{% url 'app_upload:upload_view' %}">
{{ form.as_p }}
{% csrf_token %}
<a href="#" id="upload">Upload</a>
<!-- <input type="submit" value="Upload Now"/> -->
</form>
{% endblock %}
{# BAGIAN AJAX UNTUK UPLOAD #}
{% block domready %}
function upload(event) {
event.preventDefault();
var data = new FormData($('form').get(0));
var csrftoken = getCookie('csrftoken');
$.ajax({
url: "{% url 'app_upload:upload_view' %}",
type: "POST",
data: data,
cache: false,
processData: false,
contentType: false,
success: function(data) {
$("#upload").text(data.status + " " + data.file_name);
},
error: function(data) {
alert("Faild");
},
beforeSend: function() {
$("#upload").text('loading...');
}
});
return false;
}
$("#upload").click(upload);
{% endblock %}Sekarang kita perlu membuat view buat ngehandle request buat nampilin form dan buat upload file. uka file views.py lalu isi kode di bawah ini ke dalam file tersebut:
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from .forms import FileUploadForm
def my_upload(request):
form = FileUploadForm()
return render(request, 'app_upload/document/upload.html', {'form':form})
@require_POST
def upload_view(request):
form = FileUploadForm(data=request.POST, files=request.FILES)
if form.is_valid():
myfile = form.save(commit=False)
data_sender = {
'status': 'ok',
'file_name': str(myfile.document_data.name),
}
myfile.save()
return JsonResponse(data_sender)
return JsonResponse({'status':'ko'})Selanjutnya buat file urls.py di dalam aplikasi kita lalu isi kode berikut ini ke dalamnya:
# app_upload/urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^upload/$', views.my_upload, name='my_upload'),
url(r'^upload/now$', views.upload_view, name='upload_view'),
]oke abis itu buka file urls.py yang ada di dalem proyek kita lalu buat file tersebut seperti ini:
# hello_project/urls.py
from django.conf.urls import include, url
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^app1/', include('app_upload.urls', namespace='app_upload', app_name='app_upload')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)selanjutnya buat file forms.py di dalam aplikasi kita lalu isi kode berikut ini ke dalam file tersebut:
from django import forms
from django import forms
from .models import Document
class FileUploadForm(forms.ModelForm):
class Meta:
model = Document
fields = '__all__'nah terakhir, buka file settings.py di aplikasi kita lalu tambahkan:
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')Jalankan server:
$ python manage.py runserver
buka URL http://127.0.0.1:8000/app1/upload/' dan selamat mencoba ^_^.