Django3.2 | クラウドソーシングアプリの構築 | 44 | 配送写真アップロード - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

「crowdsource/urls.py」ファイルを編集します。

記述編集　【Desktop/crowdsource/crowdsource/urls.py】31行目

from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views
from django.conf import settings
from django.conf.urls.static import static

from core import views

from core.customer import views as customer_views
from core.courier import views as courier_views, apis as courier_apis

customer_urlpatters = [
    path('', customer_views.home, name="home"),
    path('profile/', customer_views.profile_page, name="profile"),
    path('payment_method/', customer_views.payment_method_page, name="payment_method"),
    path('create_job/', customer_views.create_job_page, name="create_job"),

    path('jobs/current/', customer_views.current_jobs_page, name="current_jobs"),
    path('jobs/archived/', customer_views.archived_jobs_page, name="archived_jobs"),
    path('jobs/<job_id>/', customer_views.job_page, name="job"),
]

courier_urlpatters = [
    path('', courier_views.home, name="home"),
    path('jobs/available/', courier_views.available_jobs_page, name="available_jobs"),
    path('jobs/available/<id>/', courier_views.available_job_page, name="available_job"),
    path('jobs/current/', courier_views.current_job_page, name="current_job"),
    path('jobs/current/<id>/take_photo/', courier_views.current_job_take_photo_page, name="current_job_take_photo"),

    path('api/jobs/available/', courier_apis.available_jobs_api, name="available_jobs_api"),
    path('api/jobs/current/<id>/update/', courier_apis.current_job_update_api, name="current_job_update_api"),
]


urlpatterns = [
    path('admin/', admin.site.urls),
    path('oauth/', include('social_django.urls', namespace='social')),
    path('', views.home),

    path('sign-in/', auth_views.LoginView.as_view(template_name="sign_in.html")),
    path('sign-out/', auth_views.LogoutView.as_view(next_page="/")),
    path('sign-up/', views.sign_up),

    path('customer/', include((customer_urlpatters, 'customer'))),
    path('courier/', include((courier_urlpatters, 'courier'))),

]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

「core/courier/apis.py」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/courier/apis.py】

from django.http import JsonResponse
from django.contrib.auth.decorators import login_required
from django.views.decorators.csrf import csrf_exempt
from django.utils import timezone

from core.models import *

@csrf_exempt
@login_required(login_url="/courier/sign-in/")
def available_jobs_api(request):
  jobs = list(Job.objects.filter(status=Job.PROCESSING_STATUS).values())

  return JsonResponse({
    "success": True,
    "jobs": jobs
  })

@csrf_exempt
@login_required(login_url="/courier/sign-in/")
def current_job_update_api(request, id):
  job = Job.objects.filter(
    id=id,
    courier=request.user.courier,
    status__in=[
      Job.PICKING_STATUS,
      Job.DELIVERING_STATUS
    ]
  ).last()

  if job.status == Job.PICKING_STATUS:
    job.pickup_photo = request.FILES['pickup_photo']
    job.pickedup_at = timezone.now()
    job.status = Job.DELIVERING_STATUS
    job.save()

  return JsonResponse({
    "success": True
  })

「courier/current_job_take_photo.html」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/templates/courier/current_job_take_photo.html】

{% extends 'courier/base.html' %}
{% load static %}

{% block head %}
<script src="{% static 'js/webcam-easy.min.js' %}"></script>
<style>
  body {
    background-color: black;
  }

  .btn-back {
    position: fixed;
    top: 30px;
    left: 30px;
  }

  .buttons {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
  }

  #take-photo-step {
    height: 100%;
    display: flex;
    align-items: center;
  }

  video {
    width: 100%;
    height: auto;
  }

  #upload-step {
    height: 100%;
    display: none;
    align-items: center;
  }  

</style>

{% endblock %}

{% block content %}

<div id="upload-step">
    <img id="photo">
    <div class="buttons">
      <a id="retake-button" class="btn btn-light" href="javascript:void(retake_photo())">再度撮影</a>
      <a id="upload-button" class="btn btn-info" href="javascript:void(upload_photo())">
        アップロード
      </a>
    </div>
  </div>

<div id="take-photo-step">
  <video id="webcam" autoplay playsinline></video>
  <canvas id="canvas" class="d-none"></canvas>

  <a href="{% url 'courier:current_job' %}" class="btn-back">
    <i class="fas fa-chevron-left text-light"></i>
  </a>

  <div class="buttons">
    <a href="javascript:void(take_photo())" class="btn btn-info">
      配達の写真を撮影する
    </a>
  </div>
</div>

<script>
    const webcamElement = document.getElementById('webcam');
    const canvasElement = document.getElementById('canvas');
    const webcam = new Webcam(webcamElement, 'environment', canvasElement);
    webcam.start();
  
    function take_photo() {
      let picture = webcam.snap();
      console.log(picture);

        $("#photo").attr("src", picture);
        $("#take-photo-step").css("display", "none");
        $("#upload-step").css("display", "flex");

    }
  
    function retake_photo() {
        $("#upload-step").css("display", "none");
        $("#take-photo-step").css("display", "flex");
    }

    function upload_photo() {
    document.getElementById("canvas").toBlob(function (blob) {
      var formData = new FormData();
      formData.append('pickup_photo', blob, 'pickup_photo.png');

      fetch("{% url 'courier:current_job_update_api' job.id %}", {
        method: "POST",
        body: formData
      })
        .then(function (response) { return response.json() })
        .then(function (json) {
          if (json.success) {
            window.location.href = "{% url 'courier:current_job' %}"
          }
        })
    })
  }    
    
  </script>

{% endblock %}