{% extends "base.html" %}
{% load static %}

{% block content %}


<div class="narrow">
    <h3>Ready to upload file</h3>
    <form method="POST" action="{{ upload.url }}" enctype="multipart/form-data" id="video-upload">
        {% for field, value in upload.fields.items %}
        <input type="hidden" name="{{ field }}" value="{{ value }}" />
        {% endfor %}

        <input name="file" type="file" accept="video/*" />

        <div class="progress">
            <div class="progress-bar"></div>
        </div>
        
        <div class="form-actions text-right">
            <a class=""
                href="{{ cancel_url }}">Cancel</a>
            &nbsp;
            <button type="submit" id="upload">Upload</button>
        </div>
        <div id="status">Select a file to upload</div>
    </form>
</div>

</div>

{% endblock %}

{% block scripts %}
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>

function uploadReady(e) {
    $('#upload').attr('disabled', false);
    $('#status').html('Ready to upload');
}

function startUpload(e) {
    
    var bar = $('.progress-bar');
    var percent = $('.percent');
    var status = $('#status');

    console.log("STARTING");

    // disable file select and submit
    e.target.disabled = true;
    //$('input[name="file"]').attr('disabled', true);
            
    // patch form to use our ajax policy
    $('input[name="policy"]').val("{{ ajax_upload.fields.policy }}");
    $('input[name="signature"]').val("{{ ajax_upload.fields.signature }}");
    $('input[name="success_action_redirect"]').remove();


    $('form').ajaxForm({
        beforeSend: function() {
            
            status.html("Starting upload");
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        success: function() {
            console.log("success");
            var percentVal = '100%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        complete: function(xhr) {
            if (xhr.status == 204) {
                status.html("Finished upload");
                let s3_location = xhr.getResponseHeader("Location");
                location.href = "{{ success_url }}?location=" + s3_location;
            } else {
                status.html("Something went wrong");
                console.log(xhr.responseText);
            }
        }
    }); 
}

// enable ajax upload
$('input[name="file"]').on('change', uploadReady);
$('#upload').on('click', startUpload).attr('disabled', true);

</script>

{% endblock %}