86 lines
2.8 KiB
HTML
86 lines
2.8 KiB
HTML
{% 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>
|
|
|
|
<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 %}
|