projects/polyphonic
1
0
Fork 0
Code Issues 7 Pull Requests Releases 2 Wiki Activity

Switched to dropzone

Browse Source
This commit is contained in:
Tris
2020-09-10 20:27:38 +10:00
parent ef988708d8
commit 665694e305
11 changed files with 154 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
interface/templates/interface/project_form.html
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="narrow">
<h3>{{ title }}</h3>
<p>{{ instructions }}</p>
<form method="POST">
<form class="vertical" method="POST">
{% csrf_token %}
{{ form }}
<div class="form-actions">
interface/templates/interface/resource_list.html
+2 -2
View File
@@ -11,12 +11,12 @@
{{ resource.name }}
{% if download %}
<a href="{{ download }}">
<i class="fas fa-download"></i>
<i class="fas fa-download"></i> Download
</a>
{% endif %}
{% if request.user.is_authenticated %}
<a href="{% url 'resource_upload' project=project.pk pk=resource.pk %}">
<i class="fas fa-upload"></i>
<i class="fas fa-upload"></i> Upload
</a>
{% endif %}
</h3>
interface/templates/interface/s3_upload.html
+82
View File
@@ -0,0 +1,82 @@
{% 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="{{ media_type }}/*" 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);
});
Dropzone.options.itemUpload = {
params: dzData['fields'],
forceFallback: {{ request.GET.fallback|yesno:"true,false,false" }},
autoProcessQueue: false,
createImageThumbnails: false,
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 %}
interface/templates/interface/submission_create.html
+1 -1
View File
@@ -9,7 +9,7 @@
</p>
</div>
<div>
<form action="" method="POST" enctype="multipart/form-data">
<form class="vertical" action="" method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<div class="form-actions">
interface/templates/interface/submission_upload.html
-99
View File
@@ -1,99 +0,0 @@
{% 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="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></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 %}