Using type="image" to customize the label of file upload functionality in Django

Question

I've been trying to customize the label of the file upload button in my Django app. In Firefox, the button appears with the label 'Browse', and the hint text 'No files selected'. I need the label to be 'Upload', and want to customize the hint text too. Here's what does NOT work (from forms.py):

class PicsUploadForm(forms.ModelForm):
    image = forms.ImageField(label='Upload')
    image.widget.attrs["value"] ='Upload'
    class Meta:
        model = Pic
        exclude = ("sender","sending_time", "expiry_interval")
        fields = ("image",)

    def __init__(self, *args, **kwargs):
        super(PicsUploadForm, self).__init__(*args, **kwargs)
        self.fields['image'].widget.attrs.update({'value':'Upload'})

It produces the following tag in html:

<input id="id_image" type="file" value="Upload" name="image"></input>

But the upload button still appears with 'Browse' label, instead of 'Upload'. I also tried the following (which doesn't work):

def __init__(self, *args, **kwargs):
    super(PicsUploadForm, self).__init__(*args, **kwargs)
    self.fields['image'].label='Upload'#["value"]='Upload'

However, I'm successfully able to change the button's label to 'Upload' if I change the type from 'file' to 'image'. According to w3schools, this type defines an image as the submit button.

I was wondering if I could somehow use type="image" to customize my file upload button's label (or make the functionality from scratch).

Does anyone have a working example for this, or will this never work?

You can only change the button label to `'Upload'` if you change the type from `'file'` to `'image'` to make it work like file input only using Inspect Element / Developer tools. You cannot change the upload message without javascript. — v1k45, Mar 28 '16 at 12:41

score 0 · Accepted Answer · edited May 23 '17 at 11:44

For the first part,

How to make django to render <input type="image" ...>

You need to create a custom widget and simply override input_type attribute. Something like this:

class CustomImageWidget(forms.ClearableFileInput):
    input_type = 'image'

class PicsUploadForm(forms.ModelForm):
    image = forms.ImageField(widget=CustomImageWidget())
    image.widget.attrs["value"] ='Upload'

This will make the form render <input type="image" ...> but the element won't work like a file input field.

For the second part,

How to customize upload button labels?

Javascript:

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

Html part:

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

You can modify the rendered html of form using crispy-forms or by iterating through every form field and writing html yourself.

Taken from:

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

How to change the button text of <input type="file" />?

Using type="image" to customize the label of file upload functionality in Django

1 Answers1