<div class="help">
    <h5>{{ 'File'|trans }}</h5>
</div>

<form method="post" action="" class="mainForm" enctype="multipart/form-data" target="uploadframe" id="bb-upload-form">
<fieldset>
    {% if product.config.filename  %}
    <div class="rowElem noborder">
        <label>{{ 'Currently uploaded file'|trans }}:</label>
        <div class="formRight noborder">
            {{ product.config.filename  }}
        </div>
        <div class="fix"></div>
    </div>
    {% endif %}

    <div class="rowElem">
        <label>{{ 'Upload new file'|trans }}:</label>
        <div class="formRight noborder">
            <input type="file" name="file_data" id="file_data">
        </div>
        <div class="fix"></div>
    </div>

    <input type="submit" value="{{ 'Upload'|trans }}" class="greyishBtn submitForm" id="bb-upload-button"/>
</fieldset>
    
<input type="hidden" name="id" value="{{ product.id }}" />
</form>

<script>
$(function() {
    $('body').append('<iframe id="uploadframe" name="uploadframe" style="display:none" />');

    $('#bb-upload-form').submit(function() {
        $(this).attr('action', bb.restUrl('admin/servicedownloadable/upload'));
        
        iframe = $('#uploadframe').load(function() {
            response = iframe.contents().find('body');
            data = $.parseJSON(response.text());

            if (data.error) {
                bb.error(data.error.message, data.error.code);
            }

            if (data.result) {
                bb.msg('File was uploaded');
            }

            setTimeout(function() {
                response.html('');
            }, 1);
        });
    });
});
</script>