How can you style Django's file picker form button?

Question

I am attempting to style my Django file upload button, but since it's handled through the form and not explicitly written in the HTML within the template I cannot style it directly with HTML and CSS like I can for other buttons of type input.

I've attempted to add my CSS class within my forms.py, but it is placing the vanilla default Django file upload button on top of my CSS styled button.

My code is as follows:

class FileUploadForm(forms.Form):
    docFile = forms.FileField(
        label = "Select a CSV file",
    )

    class Meta:
        model = FileUpload
        fields = ('docFile')

    def __init__(self, *args, **kwargs):
        super(FileUploadForm, self).__init__(*args, **kwargs)
        self.fields['docFile'].widget.attrs.update({'class': 'my_class'})

I also tried defining a widget within my Meta class like so:

class Meta:
        model = FileUpload
        widgets = {
            'docFile': forms.FileInput(attrs={'class': 'my_class'}),
        }

but that had the same effect as my first attempt.

Is there a different way of accomplishing this or are there some logical errors that you can spot within my code?

Solution 1

For posterity's sake here is the solution which I found using Bootstrap here.

.fileUpload {
	position: relative;
	overflow: hidden;
	margin: 10px;
}
.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

Solution 2

If you want to style the file upload button define another button or link and style that. Then set it's click event to trigger file upload button.

HTML:

<div>
    <a id="browse" class="my_class">Browse</a>
    <input type="file" name="data" style="display: none" />
</div>

Javascript:

$('#browse').click(function(){
    $(this).parent().find('input').click();
});

To make this work in a Django form you can do it by a widget.

Comments

[dylrei]

Might be helpful to see this discussion: stackoverflow.com/questions/14401550/…

[alacy]

I tried using a widget as shown in the original question, but it rendered the same result as when I defined the attribute in my __init__() function.

[nima]

I meant a custom widget with the above html and js.

[Juan Martin Zabala]

How did you do it without using {{form.as_p}}

[rjhcnf]

@JuanMartinZabala, you can see the id with developer view of browser.