djangoで画像のドラッグアンドドロップの実装3 -完成-

djangoのプロフィール画像設定で、ドラッグアンドドロップを用いたプロフィール画像の編集ができるコードを紹介します。

前回続きから、今回が完成ということで画像をドラッグアンドドロップしてサーバー側(djangoのviews)でsaveまでのコードを紹介します。

サーバー側の理解ができている人は、1と2を読まなくても、この実装3だけを読んで理解することが可能です。

こちらが前回記事になります。

完成イメージ

まずは完成後のイメージを動画で確認ください。

プロフィール画像の変更を、ドラッグアンドドロップもしくは、通常のformでの両方の入力欄を設置し想定しています。(メインはあくまでドラッグアンドドロップ)

そしてドラッグアンドドロップして問題なければ、そのままajaxを利用してバックエンドのdjangoでsaveまでしてフロントに反映させるまでを想定します。

こんな人向け

以下の人向けに記事を書いています。

・javascript(jQuery)のAjaxでドラッグアンドドロップを実装したい

・djangoのドラッグアンドドロップでサーバーに画像を保存したい

環境

環境は以下になります。ちなみにヒロヤンの場合はpipenvでの環境開発を行っています。

環境

・OS Mac

・python 3.8

・djano 2.2

・jQuery 3.5.1

・Pillow インストール済み

・Ajaxが理解できている

実際のコード

それでは早速紹介をしていきます。

HTML

sample.html

CSS

sample.css

JS

sample.js

補足説明を以下にします。

  1. 3行目から47行目までがサーバー(views)に画像データを送るajax
  2. 21行目のtypeはHTTP通信の種類指定
  3. 23行目のprocessDataはパラメーターの内容をクエリ情報に変換(デフォルトはtrue)。オブジェクトでデータを取得する場合に記載すると覚えればOK
  4. 24行目のcacheは通信データをキャッシュするか(デフォルトはtrue)
  5. 25行目のdataは送信するデータ
  6. 26行目のdataTypeは、サーバー(views)から返るデータの指定。今回はjsonで指定
  7. 28-37行目でajaxが成功した時の動作。既に存在するimgタグを削除し新たなimgタグを32-36行目で設置
  8. 38-40行目でajaxに成功したけどサーバー側のバリデーションに引っかかった時の処理
  9. 43-45行目はajaxに失敗した時の処理
  10. 50-87行目までが、ドラッグアンドドロップした時のUIの移り変わりの動作
  11. 100-113行目でドロップされた画像のバリデーション
  12. 100-103行目では、正規表現でpngファイル、もしくはjpegファイル以外がドロップされた場合は、警告のerrorlistを表示し、ドロップできないように制御
  13. 106-112行目ではドロップされた画像が20MB以上の場合は、警告のerrorlistを表示し、ドロップできないように制御
  14. 115行目は割と重要なコード。appendの第一引数の’avator’とすり合わせる必要がある
  15. 118-124行目がプレビュー表示
  16. 127-130行目でモーダルダイアログが表示された時の閉じる一覧の変数定義
  17. 135-142行目でモーダルダイアログが表示され、136行目で「はい」でクリックされ、139行目でサーバーに画像データを送る関数を呼び出す
  18. 145-156行目で閉じる関数を呼び出しています。

これでフロント側の準備ができました。続いてサーバー側(views)での処理コードを書いていきます。

views

以下にviews.pyを書いていきます。今回はmodelsとformsは割愛します。

過去記事にmodelsとformsのことも書いておりますので、そちらからでも参考にできます。

views.py

補足説明を以下にします。

  1. 11行目のcsrf_exemptでcsrfを制御。モジュールを6行目で使えるようにする
  2. 20行目でajaxが有効な時のコードを以下に書く
  3. 24行目がフロントでモーダルダイアログが表示されて「はい」を選択(post)した時の動作
  4. 26-37行目で画像ファイルがformでバリデーションに引っかかった時はfalseを返す
  5. 39行目以下がajaxが成功且つバリデーションも問題なしの時の処理
  6. 40-42行目でまず既に存在する同じidを持つ画像データを削除
  7. 45-49行目で画像を保存
  8. 52-55行目がajaxに返す辞書型オブジェクト
  9. 57行目でjsonデータをしてajaxに返す
  10. 59-72行目はajaxではなくて通常のpost->formからの画像投稿の処理

以上です。上記のviews側でajaxにjsonデータで返すまでを理解できれば色々と応用できることが増えるかと思います。




最後に

今回のdjangoでドラッグアンドドロップというのは中々ネットで探しても情報がないので書きました。

全体像を理解するのは非常に大変ですが、Ajaxの与える値や戻り値周りを理解することができれば、しっかりとコードを書くことができます。

今回のコードは雑多な部分もあるかと思いますので、もし不明点等がありましたら、こちらのコメント欄や問い合わせからでも構いませんのでご指摘いただければと思いますのでよろしくお願いします。

スクールを利用して本格的に学ぶ

いかがでしたでしょうか?

10人中9人が挫折すると言われるプログラミングを、ヒロヤンも実はプログラミングスクールで学習をしてきたからで、結果、今はPythonエンジニアとして働いています。

挫折率が高いプログラミングこそお金を払ってメンターを付けて、道を見失わないように環境を構築する必要があるのではないでしょうか。

これはダイエットで自分一人では痩せられないけど、トレーナーを付けて否が応でもせざるを得ない環境を作ると一緒ですね。

ヒロヤンもプログラミング勉強開始直後はあれこれ悩みましたが、悩むよりも手っ取り早くスクールに登録した方が最短ルートで勉強できるのではないかと考え、結果挫折せずに今に至っています。

今なら無料でキャリアカウンセリングを行っているCodeCamp(コードキャンプ)のようなプログラミングスクールもありますのでこれを機会に是非カウンセリングだけでも受けてみてはいかがでしょうか?

CodeCampで無料のカウンセリング

上記リンク先から無料相談ができます。

またこちら(↓)ではPython専用のプログラミングスクールをまとめ紹介しています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です