brutaldon-interfaccia-web-minimale/brutaldon/templates/main/post_partial.html

{% load widget_tweaks %}

{% if reply %}
    <form method="post" action="{% url "reply" toot.id %}" enctype="multipart/form-data">
{% else %}
        <form method="post" action="{% url "toot" %}" enctype="multipart/form-data">
{% endif %}
    {% csrf_token %}

    <div class="field">
        <label class="label"> {{ form.spoiler_text.label }}</label>
        <div class="control">
            {% render_field form.spoiler_text class+="input" placeholder="Optional" %}
        </div>
    </div>

    <div class="field" >
        <label class="label" >{{ form.status.label }}</label>
        <div class="control">
            {% render_field form.status class+="textarea is-primary" rows="4" %}
        </div>
    </div>

    <div class="field">
        <label class="label" > {{ form.visibility.label }}</label>
        <div class="control has-icons-left">
            <div class="select">
                {% render_field form.visibility class+="select"%}
                <span class="icon is-small is-left" >
                    <i class="fa address-card"></i>
                </span>
            </div>
        </div>
    </div>

    <div class="field">
        <div class="file has-name">
            <label class="file-label">
                {% render_field form.media_file_1 class+="file-input" %}
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fa fa-upload"></i>
                    </span>
                    <span class="file-label">
                        {{ form.media_file_1.label }}
                    </span>
                </span>
                <span class="file-name"  id="media_filename_1">
                </span>
            </label>
        </div>
        <div class="control">
            {% render_field form.media_text_1 class+="input" placeholder="Describe attachment" %}
        </div>
    </div>


    <div>
        {{ form.errors }}
    </div>

    <div class="field">
        <div class="control">
            <input type="submit" class="button is-primary"
                   name="toot" value="Toot">
        </div>
    </div>
        </form>

<script type="application/javascript">
var file = document.getElementById("id_media_file_1");
file.onchange = function(){
    if(file.files.length > 0)
    {
        document.getElementById('media_filename_1').innerHTML =  file.files[0].name;
    }
};

</script>