PythonMania

普段はロボットとAIを組み合わせて色々作ってます。Python関係以外も色々投稿していくと思います。

【Djnago】Dropifyを使ってフォームをカッコよくカスタマイズ

Django

f:id:mizuhiki0111:20190430175940p:plain



DjangoのformsAPI を使えば簡単にフォームを実装できるんですが、何も弄らない状態だととてもシンプルなデザインになってしまいます。

CSSやBootstrapを使ってデザインを変更することもできますが、今回は「Dropify」を使ってドラッグアンドドロップでファイルをアップロードできるフォームを作成してみたいと思います。


Dropify
jeremyfagis.github.io





使い方は簡単で、テンプレートでDropify関連のjsやcssを読み込むだけで実装できます。


CSSの読み込み

    <link rel='stylesheet' href='http://cdn.rawgit.com/JeremyFagis/dropify/master/dist/css/dropify.css' />

javascriptの読み込み

  <script src='http://cdn.rawgit.com/JeremyFagis/dropify/master/dist/js/dropify.js'></script>


初期化の実行

<script>
$(function(){
  $('.dropify').dropify();
})
</script>


あとはgithubのページから「dist/fonts」フォルダをダウンロードしてきてテンプレートで読み込めば完了です。

github.com






使用するときはinputタグを以下の様に変更します。

  <input type="file" class="dropify" data-default-file="Drag and Drop Your FIle Here" name="uploadfile" />
  <button type="submit" class="btn">Send</button>


これでカスタマイズされたフォームが表示されると思います。




ちなみに今回の実装ではDjangoのフォームは使用していないので、python側でPOSTリクエストを受け取る場合はviews.pyを以下の様に記述します。

※今回使用しているmodels.pyは過去記事と同様なので、そちらをご参照ください。

www.pythonmania.work



    photo = Photo()
    photo.image = request.FILES.get("uploadfile")
    photo.save()