ファイルアップロードを成功させたい

前提・実現したいこと

恐縮ですが、以下2点実現したいことがあります。
・ファイルアップロードを成功させたい
・違う種類のメディアファイルは別々のフォルダに格納したい

発生している問題・エラーメッセージ

現状、別々のフォルダにファイルを格納する以前に、一つのフォルダにファイルアップロードが出来ていない状況です。
フォーム内を全て埋め送信を行なったのですが、index.htmlのformの上にThis field is required.とエラーメッセージが表示されてしまいました。
以下の画像は、プロジェクトディレクトリ下に設置した「media/documents」フォルダになります。

該当のソースコード

以下は、index.htmlになります。

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"　type="text/css" href="{% static 'uploader/css/style.css' %}">
    <title>Document</title>
</head>
<body>
    <div>
        <p>YoutubeUploader</p>
　　　　　　{% for field in form %}
            {{ field.errors }}
          {% endfor %}
        <form method="post" action="{% url 'uploader:result' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <p>タイトル: <input type="text" name="title"></p>
            <p>説明: <textarea class="description" name="説明" rows="5" cols="50"></textarea></p>
            <p>タグ: <textarea class="description" name="説明" rows="5" cols="50"></textarea></p>
            <p>カテゴリ:
                <select name="category">
                    <option>映画とアニメ</option>
                    <option>自転車と乗り物</option>
                    <option>音楽</option>
                    <option>ペットと動物</option>
                    <option>スポーツ</option>
                    <option>旅行とイベント</option>
                    <option>ゲーム</option>
                    <option selected>ブログ</option>
                    <option>コメディ</option>
                    <option>エンターテインメント</option>
                    <option>ニュースと政治</option>
                    <option>ハウツーとスタイル</option>
                    <option>教育</option>
                    <option>化学と技術</option>
                    <option>非営利団体と社会活動</option>
                </select>
            </p>
            <p>client_secret(JSON): <input type="file" name="certification_file"></p>
            <p>動画ファイル: <input type="file" name="movie_file"></p>
            <button type="submit">アップロード</button>
        </form>
    </div>
</body>
</html>

以下は、views.pyです

from django.shortcuts import render
from django.urls import path
import http.client  # httplibはPython3はhttp.clientへ移行
import httplib2
import os
import random
import sys
import time

from apiclient.discovery import build
from apiclient.errors import HttpError
from apiclient.http import MediaFileUpload
from oauth2client.client import flow_from_clientsecrets
from oauth2client.file import Storage
from oauth2client.tools import argparser, run_flow
from .forms import DocumentForm
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import redirect

# Create your views here.
def index(request):
    return render(request,'uploader/index.html')


def result(request):
    if request.method == 'POST':
        form = DocumentForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect(request,'uploader/result.html')
    else:
        form = DocumentForm()

    return render(request, 'uploader/index.html', {
        'form': form
    })

以下は、forms.pyになります

from django import forms
from .models import Document
from django.core.validators import MinLengthValidator

class DocumentForm(forms.ModelForm):
    class Meta:
        model = Document
        fields = ('description', 'document', )

以下は、models.pyになります。

from django.db import models

# Create your models here.
class Document(models.Model):
    description = models.CharField(max_length=255, blank=True)
    document = models.FileField(upload_to='documents/')
    uploaded_at = models.DateTimeField(auto_now_add=True)

試したこと

入力フィールドは全て埋め、「client_secret(JSON)」にはJSONファイル、「動画ファイル」にはmp4ファイルを指定しました。

補足情報（FW/ツールのバージョンなど）

OSはMac OS,エディターはVSCodeを使用しております。

行動規範の内容に同意します

回答1件

ベストアンサー

テンプレートのinputのnameとDocumentFormの対応ができていません。
OAuth2や、もしかしたらOIDCとか気になりますが、まずは、下記テンプレートでいかがでしょうか。

html
1
2load static %}
3<!DOCTYPE html>
4<html lang="ja">
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9    <link rel="stylesheet"　type="text/css" href="{% static 'uploader/css/style.css' %}">
10    <title>Document</title>
11</head>
12<body>
13    <div>
14        <p>YoutubeUploader</p>
15　　　　　　{% for field in form %}
16            {{ field.errors }}
17          {% endfor %}
18        <form method="post" action="{% url 'uploader:result' %}" enctype="multipart/form-data">
19            {% csrf_token %}
20            {{ form }}
21            <button type="submit">アップロード</button>
22        </form>
23    </div>
24</body>
25</html>

投稿2020/07/04 16:11

編集2020/07/05 02:30

hasami

総合スコア1277

study_111

2020/07/05 01:58

ご回答頂きまして、ありがとうございます。行き詰まってしまっていた為、助かりました。iinputのnameはモデルと対応をしていたのですね。 Djangoのテンプレート構文の{{ form }}は、既にHTML,CSSを作成していた為、使用は見送る形としたのですが、一度使用してみましたら、forms.pyやmodelとの連携が確認出来、大変勉強になりました。

study_111

2020/07/05 02:04 編集

すみません。実は、どうしても解決できない点があり、誠に恐縮なのですが、ご助言頂きたい質問がございます。その質問と言いますのは、「https://teratail.com/questions/275006」こちらになります。お手数をおかけし申し訳ないのですが、お手すきの際にでもチェック頂けましたら幸いです。

行動規範の内容に同意します