2

I'm testing a simple Django form to upload photos. It's a standard affair:

<form action="{% url 'pic_upload' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
    <b>Upload photo:</b>
    {{ form.image }}<br>
    <input class="button"type="submit" value="OK" id="id_submit">
</form>

When I run this, I see a button labelled "Browse" (browser: Firefox), using which I can select a file to upload.

My question is, how do I customize the label on this "Browse" button. For instance, I want it to read "Select Photo" instead of "Browse" (on all browsers).

I see a good answers on SO (e.g. here, here or here) but none of these help me rename the file upload button of a django form.

Here's what I've tried (in vain):

In my forms.py:

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

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

In my main.css:

 input#id_image{

    content:'Select Photo';
    width: 100%;
    height:100%;

}

The button is still labelled 'Browse' after all of the above changes. What do I do?

Note that I'm looking for a pure CSS solution that works across browsers, including proxy browsers such as Opera Mini.

Community
  • 1
  • 1
Hassan Baig
  • 15,055
  • 27
  • 102
  • 205
  • Add a CSS className to the image field and style it via CSS, or target it via the `name` attribute, and change the styles as needed. – rnevius Mar 18 '16 at 12:13
  • 1
    @HassanBaig - You can apply attrs to a widget, [see this answer](http://stackoverflow.com/a/32986885/1324033) for an example (there is also a `attrs` kwarg for a widget) – Sayse Mar 18 '16 at 12:36
  • @HassanBaig - I'm not sure, you may want to update your question to include what you have tried so far – Sayse Mar 18 '16 at 22:24
  • @HassanBaig - Thinking about it again, are you just trying to change the text of the label? There is another `label` kwarg for the field, [further (automatic) control over a label is *extremely* difficult](http://stackoverflow.com/questions/34747964/show-booleanfield-checkbox-before-label) and I never managed to find a way that was worth the effort. – Sayse Mar 18 '16 at 22:36
  • @Sayse: Yes, changing the text label is precisely what I'm trying to accomplish. Wanted to localize the text for some non-English speaking audience. – Hassan Baig Mar 18 '16 at 22:42
  • @HassanBaig - Sure thats what the `label` kwarg does then, just set it to something like `label=_('Hello')` (Link to [docs](https://docs.djangoproject.com/en/1.9/ref/forms/fields/#label)) – Sayse Mar 18 '16 at 22:43
  • @Sayse: oh that I've used since the start - never helped in this particular case for some odd reason. For instance `image = forms.ImageField(label="Select Photo")`, but it's still **Browse**. – Hassan Baig Mar 18 '16 at 22:49
  • I'm not sure then ... may be worth looking at the source for [ClearableFileInput](https://github.com/django/django/blob/master/django/forms/widgets.py#L346) which is the widget that is being used (by default) – Sayse Mar 18 '16 at 22:57

0 Answers0