Django - Change what 'upload file' button says in the template

Question

I have this model:

class uploadImage(models.Model):
    postImage = models.ImageField(upload_to=get_postImage_path, blank=True, null=True)

and I created a form for this model. I passed the form as 'imageForm' to my template. This is my template:

<form enctype="multipart/form-data" id='imageForm' method="post" action="/uploadImage/">{% csrf_token %}
{{ imageForm.postImage }}
<input type='submit' value='upload' />
</form>

Now when I go to this template page from my browser, there is a button which says 'choose file' and beside that button, it says 'no file chosen'. After the user clicks 'choose file' and chooses a file, the 'no file chosen' text changes to the file name.

How do I make the button say 'Upload Image' rather than 'Choose file' and make the 'No file chosen' say 'Image attached' (rather than the file name) once the user chooses an image?

possible duplicate of [Change default text in input type="file"?](http://stackoverflow.com/questions/5138719/change-default-text-in-input-type-file) — Brandon Taylor, Sep 03 '14 at 19:00

score 3 · Accepted Answer · edited May 23 '17 at 10:29

This has nothing to do with Django; the file upload button and text are defined by the browser. There are solutions, most of which involve the use of another element that triggers the upload button.

Here's a five-minute YouTube tutorial that solves the problem on a Django application.

This jQuery plugin will also solve your problem.

And this solution uses CSS.

Additionally, below are some links to other solutions and discussions:

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

Labeling file upload button

HTML input file - how to translate "Choose File" and "No file Chosen"?

Change default text in input type="file"?