{% load i18n %}
{% load compress %}
{% load static %}
{% load core_tags %}

<form id="upload-form" class="upload-form sidebar-form" action="{{ upload_url }}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}

    <input type="hidden" name="method" value="upload_file" />

    <div class="upload-form-field">
        <input type="file" name="uploaded_file" />
        <p>{% trans "Select file" %}</p>
    </div>

    <div class="sidebar-form-button">
        <button type="submit" class="btn btn-primary" title="{% trans 'Upload' %}">
            <i class="fa fa-arrow-right"></i>
        </button>
    </div>
</form>

<script>
    $(document).ready(function() {
        $('#upload-form button[type="submit"]').prop('disabled', true)
        $('#upload-form input').change(function() {
            if (this.files[0] == null) {
                $('#upload-form button[type="submit"]').prop('disabled', true)
                $('#upload-form p').text('{% trans "Select file" %}')
            } else {
                $('#upload-form button[type="submit"]').prop('disabled', false)
                $('#upload-form p').text(this.files[0].name);
            }
        });
    });
</script>
