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

{% block content %}


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

            <input name="file" type="file" accept="{{ accept_files }}/*" id="fallback-file"/>
            <input type="submit" value="Send" id="fallback-upload"/>
        </div>
    </form>
    <div class="form-actions text-right">
        <a class=""
            href="{{ cancel_url }}">Cancel</a>
        &nbsp;
        <button type="submit" id="upload" disabled>Upload</button>
    </div>
</div>

{% endblock %}

{% block scripts %}
<link rel="stylesheet" href="{% static 'dropzone/dropzone.css' %}"/>
<script src="{% static 'dropzone/dropzone.js' %}"></script>
{{ ajax_upload|json_script:"dropzone-data" }}
<script type="text/javascript">

const dzData = JSON.parse(document.getElementById('dropzone-data').textContent);
console.log(dzData);

let status = $('#status');
let uploadBtn = $('#upload');

$('#fallback-upload').on('click', function() {
    status.html('Uploading - please wait...');
}).attr('disabled', true);

$('#fallback-file').on('change', function() {
    status.html('Ready to upload');
    $('#fallback-upload').attr('disabled', false);
});

let fallback = {{ request.GET.fallback|yesno:"true,false,false" }};

Dropzone.options.itemUpload = {
        params: dzData['fields'],
        forceFallback: fallback, 
        autoProcessQueue: false,
        createImageThumbnails: false,
        //acceptedFiles: acceptFiles,
        maxFiles: 1,
        addRemoveLinks: true,
        maxFilesize: 500,
        dictDefaultMessage: "Select a file to upload (max 500Mb)",
        dictFallbackMessage: "Your browser is old!, using alternative method",
        init: function() {
            let dz = this;
            uploadBtn.on('click', function() {
                dz.processQueue();
            });
            this.on('addedfile', function(f) {
                status.html('Ready to upload...');
                uploadBtn.attr('disabled', false);
            });
            this.on('sending', function(f) {
                status.html('Uploading - please wait...');
            });
            this.on('success', function(f) {
                status.html("Upload successfull");
                //if (! confirm("Upload complete - redirect?")) return;
                let s3_location = f.xhr.getResponseHeader("Location");
                location.href = "{{ success_url }}?location=" + s3_location;
            });
        }
};

</script>
{% endblock %}