django file upload template design

Question

I created a simple file uploader in django which works great and am now trying to format the form in the template.

The "choose file" button has a label next to it that reads "No file chosen" which properly changes to the file name when a file is selected.

I would like to be able to move the location of that text "No file chosen" so it is not right next to the button but I cannot figure out how to get/move move this label. (I'm fairly new to programming and HTML for that matter)

I appreciate the time and expertise

Ben

Form:

class UploadFileForm(forms.Form):
    upload = forms.FileField()

Template form:

<form action="{% url 'reconcile_inventory' location.slug %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}

    {{ form.upload }}

    <input type="submit" value="Submit" />

</form

>

Answer 1

Unfortunately, you can't move this label.
The browser decides how it's rendered.

However, there are some options.
For example, you can make the input's label to be of the same color as your background, like this:

<input type="file" class="remove-label">

And css:

input.remove-label
{
    color: #fff;
}

OR give this input a small width, so only a button will be displayed.

And then just place your custom label in a div where you'd like it to be.
But this obviously won't let the user see a 'current' file.