Django로 파일업로드 페이지 작성

https://intellectual-curiosity.tokyo/2018/12/18/django%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

Djangoでファイルをアップロードする方法

Djangoでファイルをアップロードする方法をご紹介します。

目次 [非表示]

• 1 条件
• 2 アップロード処理の実装
  • 2.1 アップロード先ディレクトリ作成
  • 2.2 urls.py
  • 2.3 views.py
  • 2.4 forms.py
  • 2.5 テンプレート
  • 2.6 実行結果
• 3 ファイル種別のバリデーション
  • 3.1 forms.py
  • 3.2 実行結果
• 4 参考
  • 4.1 サンプルソース
  • 4.2 Django公式：ファイルのアップロード

条件

• Django 2.1.4
• Python 3.7.0

アップロード処理の実装

「アップロード画面」と「アップロード完了画面」を作成します。

• アップロード画面：ファイルを選択してアップロード実行
• アップロード完了画面：アップロードが完了したら表示

アップロード先ディレクトリ作成

アップロードしたファイルの保存先として以下のディレクトリ（uploads）を作成します。

1. projectName
2. ├projectName
3. └monitor
4. ├migrations
5. ├templates
6. └uploads ←ここにアップロードしたファイルが保存される
7. ・・
8. ・・

urls.py

1. # urls.py抜粋
3. from django.urls import path
4. from . import views
6. app_name = 'monitor'
8. urlpatterns = [
10. ・・・
12. # ファイルアップロード用
13. path('monitor/upload/', views.upload, name='upload'),
14. path('monitor/upload_complete/', views.upload_complete, name='upload_complete'),
15. ]

views.py

1. # views.py抜粋
3. import os
4. from .forms import UploadFileForm
6. UPLOAD_DIR = os.path.dirname(os.path.abspath(__file__)) + '/uploads/' # アップロードしたファイルを保存するディレクトリ
9. # アップロードされたファイルのハンドル
10. def handle_uploaded_file(f):
11. path = os.path.join(UPLOAD_DIR, f.name)
12. with open(path, 'wb+') as destination:
13. for chunk in f.chunks():
14. destination.write(chunk)
17. # ファイルアップロード
18. def upload(request):
19. if request.method == 'POST':
20. form = UploadFileForm(request.POST, request.FILES)
21. if form.is_valid():
22. handle_uploaded_file(request.FILES['file'])
23. return redirect('monitor:upload_complete') # アップロード完了画面にリダイレクト
24. else:
25. form = UploadFileForm()
26. return render(request, 'monitor/upload.html', {'form': form})
29. # ファイルアップロード完了
30. def upload_complete(request):
31. return render(request, 'monitor/upload_complete.html')

forms.py

1. # forms.py
3. from django import forms
6. class UploadFileForm(forms.Form):
7. file = forms.FileField()

テンプレート

アップロード画面：upload.html、アップロード完了画面：upload_complete.htmlを作成します。
（monitor/templates/monitorの下に作成）

1. <!-- upload.html -->
2. {% extends 'base.html' %}
4. {% block content %}
6. <h1>アップロード サンプル</h1>
8. <form method="POST" enctype="multipart/form-data">
9. {% csrf_token %}
10. {{ form }}
11. <div class="form-group">
12. <button type="submit">アップロード</button>
13. </div>
14. </form>
16. {% endblock %}

1. <!-- upload_complete.html -->
3. {% extends 'base.html' %}
5. {% block content %}
7. <h1>アップロード完了</h1>
9. <a href="{% url 'monitor:upload' %}"><button>戻る</button></a>
11. {% endblock %}

実行結果

Djangoを起動して以下のURLにアクセスします。

http://127.0.0.1:8000/monitor/upload/

ファイル選択とアップロードボタンが表示されます。

ファイルを選択せずにアップロードボタンを押すと、警告メッセージが表示されます。

ファイルを選択すると、選択したファイル名が表示されます。

アップロードを実行すると、アップロード完了画面に遷移します。

指定のディレクトリに対象ファイルがアップロードされました。

ファイル種別のバリデーション

アップロードするファイル種別を限定する処理を実装します。
ここではcsvファイルのみを許可するようにします。

forms.py

フォームにバリデーションチェックのメソッドを追加します。
（csv以外の拡張子も受け入れたい場合、対象の拡張子をVALID_EXTENSIONSに追加します。）

1. # forms.py
3. from django import forms
4. import os
6. VALID_EXTENSIONS = ['.csv']
9. class UploadFileForm(forms.Form):
10. file = forms.FileField(
11. label='アップロードファイル',
12. )
14. def clean_file(self):
15. file = self.cleaned_data['file']
16. extension = os.path.splitext(file.name)[1] # 拡張子を取得
17. if not extension.lower() in VALID_EXTENSIONS:
18. raise forms.ValidationError('csvファイルを選択してください！')

実行結果

csv以外のファイルをアップロードしようとするとエラーメッセージが表示されます。

参考

サンプルソース

サンプルソースをGitHubに公開しています。
https://github.com/kzmrt/graph

Django公式：ファイルのアップロード

https://docs.djangoproject.com/ja/2.1/topics/http/file-uploads/