{"id":30,"date":"2015-05-09T00:52:07","date_gmt":"2015-05-08T22:52:07","guid":{"rendered":"http:\/\/mickael.bucas.name\/blog\/?p=30"},"modified":"2019-01-31T12:39:42","modified_gmt":"2019-01-31T11:39:42","slug":"a-new-django-widget","status":"publish","type":"post","link":"https:\/\/mickael.bucas.name\/blog\/2015\/05\/a-new-django-widget\/","title":{"rendered":"A new Django widget"},"content":{"rendered":"

I’m building websites with Bootstrap and Django. I’ve already created a form on one of them with a file input. The standard file input can’t really be styled with CSS apparently, so I’ve searched for a way to have a nice Bootstrap file input and found this<\/a>. In short, it uses a button and a text input for display, and a transparent file input above them to use the browser access to local files. Some Javascript makes those two parts communicate.<\/p>\n

First I’ve used this manually in a form directly in the template. Today I discovered that you can write your own Django widgets, so I tried to reorganize this file input.<\/p>\n

Creating the widget<\/h3>\n

First I created a widgets<\/code> directory in my app, with the following files : __init__.py<\/code> (empty) and styledfileinput.py<\/code>.<\/p>\n

styledfileinput.py<\/code> contains :<\/p>\n

# StyledFileInput\n# coding: utf-8\n\nfrom django.forms.widgets import FileInput\nfrom django.utils.html import format_html\nfrom django.forms.utils import flatatt\n\nclass StyledFileInput(FileInput):\n\nclass Media:\ncss = { 'all': ('styledfileinput.css', ) }\njs = ('styledfileinput.js', )\n\ndef render(self, name, value, attrs=None):\nif value is None:\nvalue = ''\nfinal_attrs = self.build_attrs(attrs, type=self.input_type, name=name)\nif value != '':\n# Only add the 'value' attribute if a value is non-empty.\nfinal_attrs['value'] = force_text(self._format_value(value))\nreturn format_html(\n'<div class=\"input-group\">\\n'\n+ '<span class=\"input-group-btn\">\\n'\n+ '<span class=\"btn btn-default btn-file\">\\n'\n+ 'Browse... \\n'\n+ '<input multiple=\"\" {} >\\n'\n+ '<\/span>\\n'\n+ '<\/span>\\n'\n+ '<input class=\"form-control\" readonly=\"\" type=\"text\">\\n'\n+ '<\/div>\\n', flatatt(final_attrs)\n)\n<\/pre>\n
I’ve created a StyledFileInput<\/code> class inheriting from FileInput<\/code>, and redefined the render<\/code> function with the whole HTML block. I’ve kept the attributes and value handling, so that Django can use it properly.<\/p>\n
There is an inner Media<\/code> class to define the required static files. This two files are placed in the static<\/code> directory of my app.<\/p>\n
Here is the content of styledfileinput.css<\/code> :<\/p>\n
\/* file buttons should be styled *\/\n.btn-file {\nposition: relative;\noverflow: hidden;\n}\n\n.btn-file input[type=file] {\nposition: absolute;\ntop: 0;\nright: 0;\nmin-width: 100%;\nmin-height: 100%;\nfont-size: 999px;\ntext-align: right;\nfilter: alpha(opacity=0);\nopacity: 0;\nbackground: red;\ncursor: inherit;\ndisplay: block;\n}\n<\/pre>\n
Then styledfileinput.js<\/code> :<\/p>\n
(function($){\n$(document)\n.on('change', '.btn-file :file', function() {\nvar input = $(this),\nnumFiles = input.get(0).files ? input.get(0).files.length : 1,\nlabel = input.val().replace(\/\\\\\/g, '\/').replace(\/.*\\\/\/, '');\ninput.trigger('fileselect', [numFiles, label]);\n});\n\n$(document).ready( function() {\n$('.btn-file :file').on('fileselect', function(event, numFiles, label) {\n\nvar input = $(this).parents('.input-group').find(':text'),\nlog = numFiles > 1 ? numFiles + ' files selected' : label;\n\nif( input.length ) {\ninput.val(log);\n} else {\nif( log ) alert(log);\n}\n\n});\n});\n})(django.jQuery);\n<\/pre>\n
You can see that this code is wrapped in a function called with django.jQuery<\/code> for $<\/code>. This is necessary as I also use the AdminDateWidget, which uses the following JavaScript :<\/p>\n
\/* Puts the included jQuery into our own namespace using noConflict and passing\n* it 'true'. This ensures that the included jQuery doesn't pollute the global\n* namespace (i.e. this preserves pre-existing values for both window.$ and\n* window.jQuery).\n*\/\nvar django = django || {};\ndjango.jQuery = jQuery.noConflict(true);\n<\/pre>\n
Using the widget<\/h3>\n
Now I can use it in a Django form :<\/p>\n
from app.widgets.styledfileinput import StyledFileInput\n\nclass DocumentForm(forms.ModelForm):\nclass Meta:\nmodel = Document\nfields = \"__all__\"\nwidgets = {\n'date': admin.widgets.AdminDateWidget(),\n'filename' : StyledFileInput(),\n}\n<\/pre>\n
In the template, nothing changes in the form itself :<\/p>\n
\n<form method=\"post\" enctype=\"multipart\/form-data\">\n{% csrf_token %}\n<div class=\"panel panel-default\">\n<div class=\"panel-body\">\n{{ doc_form|bootstrap_horizontal }}\n<button class=\"btn btn-default\" type=\"submit\">Envoyer<\/button>\n<\/div>\n<\/div>\n<\/form>\n<\/pre>\n
You just have to be sure to put somewhere in your template {{ doc_form.media }}<\/code> so that the required static files are included.<\/p>\n
Conclusion<\/h3>\n
Now that the Bootstrap file input is redefined as a widget, it’s easy to attach to any classic Django forms, and it’s easy to reuse in any project.<\/p>\n
If you have any suggestion to improve it, feel free to comment.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’m building websites with Bootstrap and Django. I’ve already created a form on one of them with a file input. The standard file input can’t really be styled with CSS apparently, so I’ve searched for a way to have a nice Bootstrap file input and found this. In short, it uses a button and a…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-python"],"_links":{"self":[{"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":21,"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/posts\/30\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mickael.bucas.name\/blog\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}