finished exercises, not 100% sure searching/sorting happens on the server

.gitignore

@@ -89,4 +89,5 @@ ENV/
 .ropeproject
 
 .DS_Store
-*.sqlite3
+*.sqlite3
+media

manage.py

@@ -7,9 +7,6 @@
     try:
         from django.core.management import execute_from_command_line
     except ImportError:
-        # The above import may fail for some other reason. Ensure that the
-        # issue is really that Django is missing to avoid masking other
-        # exceptions on Python 2.
         try:
             import django
         except ImportError:

mysite/photos/apps.py

@@ -1,7 +1,4 @@
-from __future__ import unicode_literals
-
 from django.apps import AppConfig
 
-
 class PhotosConfig(AppConfig):
     name = 'mysite.photos'

mysite/photos/forms.py

@@ -1,9 +1,7 @@
 from django import forms
-
-from .models import Photo
-
+from .models import PhotoModel
 
 class PhotoForm(forms.ModelForm):
     class Meta:
-        model = Photo
+        model = PhotoModel
         fields = ('file', )

mysite/photos/migrations/0001_initial.py

@@ -1,6 +1,5 @@
 # -*- coding: utf-8 -*-
 # Generated by Django 1.10.3 on 2016-11-22 12:45
-from __future__ import unicode_literals
 
 from django.db import migrations, models
 
@@ -14,7 +13,7 @@ class Migration(migrations.Migration):
 
     operations = [
         migrations.CreateModel(
-            name='Photo',
+            name='PhotoModel',
             fields=[
                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                 ('title', models.CharField(blank=True, max_length=255)),

mysite/photos/migrations/0002_auto_20161122_1248.py

@@ -1,7 +1,5 @@
 # -*- coding: utf-8 -*-
 # Generated by Django 1.10.3 on 2016-11-22 12:48
-from __future__ import unicode_literals
-
 from django.db import migrations, models
 
 
@@ -13,7 +11,7 @@ class Migration(migrations.Migration):
 
     operations = [
         migrations.AlterField(
-            model_name='photo',
+            model_name='photomodel',
             name='file',
             field=models.FileField(upload_to='photos/'),
         ),

mysite/photos/models.py

@@ -1,9 +1,13 @@
-from __future__ import unicode_literals
-
 from django.db import models
 
-
-class Photo(models.Model):
+class PhotoModel(models.Model):
     title = models.CharField(max_length=255, blank=True)
     file = models.FileField(upload_to='photos/')
-    uploaded_at = models.DateTimeField(auto_now_add=True)
+    uploaded_at = models.DateTimeField(auto_now_add=True)
+
+    # image = models.ImageField(upload_to='photos/')
+    # class Meta:
+    #     ordering = ['name']
+
+    def __str__(self):
+        return self.title

mysite/photos/serializers.py

@@ -0,0 +1,11 @@
+from rest_framework import serializers
+from .models import PhotoModel
+
+class PhotoSerializer(serializers.ModelSerializer):
+    # id = serializers.IntegerField(read_only=True)
+
+    class Meta:
+        model = PhotoModel
+        fields = (
+            'title', 'file', 'uploaded_at'
+        )

mysite/photos/static/photos/js/basic-upload.js

@@ -1,18 +1,25 @@
-$(function () {
+$(document).ready( function () {
+  //https://django-rest-framework-datatables.readthedocs.io/en/latest/tutorial.html#a-more-complex-and-detailed-example
+  $('#gallery').DataTable({
+  "serverSide": true,
+  "ajax": "/photos/api/photos/?format=datatables",
+  "columns": [
+      {"data": "file", "render": function(data) { return `<img src="${data}" style="height:100px;"/>`;}},
+      {"data": "file", "render": function(data) { return `<a href="${data}" style="height:100px;">${data.split('/').pop()}</a>`;}},
+      {"data": "uploaded_at"},
+  ]
+  });
+});
 
+$(function () {
   $(".js-upload-photos").click(function () {
     $("#fileupload").click();
   });
 
   $("#fileupload").fileupload({
     dataType: 'json',
     done: function (e, data) {
-      if (data.result.is_valid) {
-        $("#gallery tbody").prepend(
-          "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
-        )
-      }
+      $('#gallery').DataTable().ajax.reload();
     }
   });
-
-});
+});

mysite/photos/templates/photos/basic_upload/index.html

@@ -10,10 +10,23 @@
   <script src="{% static 'js/jquery-file-upload/jquery.iframe-transport.js' %}"></script>
   <script src="{% static 'js/jquery-file-upload/jquery.fileupload.js' %}"></script>
 
+  {# DATATABLES #}
+  <script charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
+  <script charset="utf8" src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
+
+
   {# PHOTOS PAGE SCRIPTS #}
   <script src="{% static 'photos/js/basic-upload.js' %}"></script>
 {% endblock %}
 
+{% block css %}
+
+  {# DATATABLES #}
+  <link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css"/>
+  <link rel="stylesheet" src="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
+
+{% endblock %}
+
 {% block photos_content %}
   <div style="margin-bottom: 20px;">
     <button type="button" class="btn btn-primary js-upload-photos">
@@ -25,18 +38,13 @@
            data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
   </div>
 
-  <table id="gallery" class="table table-bordered">
+  <table id="gallery" class="table table-striped table-bordered" style="width:100%">
     <thead>
       <tr>
         <th>Photo</th>
+        <th>File Name</th>
+        <th>Uploaded at</th>
       </tr>
     </thead>
-    <tbody>
-      {% for photo in photos %}
-        <tr>
-          <td><a href="{{ photo.file.url }}">{{ photo.file.name }}</a></td>
-        </tr>
-      {% endfor %}
-    </tbody>
   </table>
 {% endblock %}

mysite/photos/urls.py

@@ -1,10 +1,19 @@
-from django.conf.urls import url
-
+from django.urls import re_path, include
+from rest_framework import routers
 from . import views
 
+app_name = "amdax_app"
+
+router = routers.DefaultRouter()
+router.register(r'api/photos', views.PhotoViewSet)
+
+
 urlpatterns = [
-    url(r'^clear/$', views.clear_database, name='clear_database'),
-    url(r'^basic-upload/$', views.BasicUploadView.as_view(), name='basic_upload'),
-    url(r'^progress-bar-upload/$', views.ProgressBarUploadView.as_view(), name='progress_bar_upload'),
-    url(r'^drag-and-drop-upload/$', views.DragAndDropUploadView.as_view(), name='drag_and_drop_upload'),
+    re_path(r'^clear/$', views.clear_database, name='clear_database'),
+    re_path(r'^basic-upload/$', views.BasicUploadView.as_view(), name='basic_upload'),
+    re_path(r'^progress-bar-upload/$', views.ProgressBarUploadView.as_view(), name='progress_bar_upload'),
+    re_path(r'^drag-and-drop-upload/$', views.DragAndDropUploadView.as_view(), name='drag_and_drop_upload'),
+    re_path('', include(router.urls)),
+    re_path('api-auth/', include('rest_framework.urls', namespace='rest_framework')),
+
 ]

mysite/photos/views.py

@@ -5,12 +5,19 @@
 from django.views import View
 
 from .forms import PhotoForm
-from .models import Photo
+from .models import PhotoModel
+from .serializers import PhotoSerializer
+from rest_framework import viewsets
+
+
+class PhotoViewSet(viewsets.ModelViewSet):
+    queryset = PhotoModel.objects.all()
+    serializer_class = PhotoSerializer
 
 
 class BasicUploadView(View):
     def get(self, request):
-        photos_list = Photo.objects.all()
+        photos_list = PhotoModel.objects.all()
         return render(self.request, 'photos/basic_upload/index.html', {'photos': photos_list})
 
     def post(self, request):
@@ -25,7 +32,7 @@ def post(self, request):
 
 class ProgressBarUploadView(View):
     def get(self, request):
-        photos_list = Photo.objects.all()
+        photos_list = PhotoModel.objects.all()
         return render(self.request, 'photos/progress_bar_upload/index.html', {'photos': photos_list})
 
     def post(self, request):
@@ -41,7 +48,7 @@ def post(self, request):
 
 class DragAndDropUploadView(View):
     def get(self, request):
-        photos_list = Photo.objects.all()
+        photos_list = PhotoModel.objects.all()
         return render(self.request, 'photos/drag_and_drop_upload/index.html', {'photos': photos_list})
 
     def post(self, request):
@@ -55,7 +62,7 @@ def post(self, request):
 
 
 def clear_database(request):
-    for photo in Photo.objects.all():
+    for photo in PhotoModel.objects.all():
         photo.file.delete()
         photo.delete()
     return redirect(request.POST.get('next'))

mysite/settings.py

@@ -1,7 +1,7 @@
 """
 Django settings for mysite project.
 
-Generated by 'django-admin startproject' using Django 1.10.3.
+
 
 For more information on this file, see
 https://docs.djangoproject.com/en/1.10/topics/settings/
@@ -36,6 +36,7 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'rest_framework',
 
     'mysite.photos',
 ]
@@ -126,3 +127,16 @@
 
 MEDIA_URL = '/media/'
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
+
+REST_FRAMEWORK = {
+    'DEFAULT_RENDERER_CLASSES': (
+        'rest_framework.renderers.JSONRenderer',
+        'rest_framework.renderers.BrowsableAPIRenderer',
+        'rest_framework_datatables.renderers.DatatablesRenderer',
+    ),
+    'DEFAULT_FILTER_BACKENDS': (
+        'rest_framework_datatables.filters.DatatablesFilterBackend',
+    ),
+    'DEFAULT_PAGINATION_CLASS': 'rest_framework_datatables.pagination.DatatablesPageNumberPagination',
+    'PAGE_SIZE': 10,
+}

mysite/urls.py

@@ -1,12 +1,13 @@
 from django.conf import settings
-from django.conf.urls import url, include
+from django.urls import re_path, include
 from django.conf.urls.static import static
 from django.views.generic import TemplateView
 
 
+
 urlpatterns = [
-    url(r'^$', TemplateView.as_view(template_name='home.html'), name='home'),
-    url(r'^photos/', include('mysite.photos.urls', namespace='photos')),
+    re_path(r'^$', TemplateView.as_view(template_name='home.html'), name='home'),
+    re_path(r'^photos/', include('mysite.photos.urls', namespace='photos')),
 ]
 
 if settings.DEBUG:

requirements.txt

@@ -1 +1 @@
-Django==1.10.3
+Django==4.0.2