Commit 50934d4d by Julian Arni

Make client-side use jquery-file-upload

parent b6795b4e
...@@ -25,13 +25,15 @@ ...@@ -25,13 +25,15 @@
<p>${_("File uploads must be gzipped tar files (.tar.gz) containing, at a minimum, a {filename} file.").format(filename='<code>course.xml</code>')}</p> <p>${_("File uploads must be gzipped tar files (.tar.gz) containing, at a minimum, a {filename} file.").format(filename='<code>course.xml</code>')}</p>
<p>${_("Please note that if your course has any problems with auto-generated {nodename} nodes, re-importing your course could cause the loss of student data associated with those problems.").format(nodename='<code>url_name</code>')}</p> <p>${_("Please note that if your course has any problems with auto-generated {nodename} nodes, re-importing your course could cause the loss of student data associated with those problems.").format(nodename='<code>url_name</code>')}</p>
</div> </div>
<form action="${reverse('import_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}" method="post" enctype="multipart/form-data" class="import-form"> <form id="fileupload" method="post" enctype="multipart/form-data"
class="import-form" url="${reverse('import_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}">
<h2>${_("Course to import:")}</h2> <h2>${_("Course to import:")}</h2>
<p class="error-block"></p> <p class="error-block"></p>
<a href="#" class="choose-file-button">${_("Choose File")}</a> <a href="#" class="choose-file-button">${_("Choose File")}</a>
<p class="file-name-block"><span class="file-name"></span><a href="#" class="choose-file-button-inline">${_("change")}</a></p> <p class="file-name-block"><span class="file-name"></span><a href="#" class="choose-file-button-inline">${_("change")}</a></p>
<input type="file" name="course-data" class="file-input"> <input type="file" name="course-data" class="file-input" >
<input type="submit" value="${_('Replace my course with the one above')}" class="submit-button"> <input type="submit" value="${_('Replace my course with the one above')}" class="submit-button" >
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
<div class="progress-bar"> <div class="progress-bar">
<div class="progress-fill"></div> <div class="progress-fill"></div>
<div class="percent">0%</div> <div class="percent">0%</div>
...@@ -43,6 +45,9 @@ ...@@ -43,6 +45,9 @@
</%block> </%block>
<%block name="jsextra"> <%block name="jsextra">
<script src="${static.url('js/vendor/jQuery-File-Upload/js/jquery.iframe-transport.js')}"> </script>
<script src="${static.url('js/vendor/jQuery-File-Upload/js/jquery.fileupload.js')}"> </script>
<script> <script>
(function() { (function() {
...@@ -52,31 +57,43 @@ var percent = $('.percent'); ...@@ -52,31 +57,43 @@ var percent = $('.percent');
var status = $('#status'); var status = $('#status');
var submitBtn = $('.submit-button'); var submitBtn = $('.submit-button');
$('form').ajaxForm({
beforeSend: function() { $('#fileupload').fileupload({
status.empty();
var percentVal = '0%';
bar.show(); dataType: 'json',
fill.width(percentVal); type: 'POST',
percent.html(percentVal);
submitBtn.hide(); maxChunkSize: 20 * 1000000, // 20 MB
autoUpload: false,
add: function(e, data) {
submitBtn.show().click(function(e){
e.preventDefault();
data.submit();
});
}, },
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%'; progressall: function(e, data){
var percentVal = parseInt(data.loaded / data.total * 100, 10) + "%";
bar.show();
fill.width(percentVal); fill.width(percentVal);
percent.html(percentVal); percent.html(percentVal);
}, },
complete: function(xhr) { done: function(e, data){
if (xhr.status == 200) { bar.hide();
percent.html("Unpacking files...");
alert('${_("Your import was successful.")}'); alert('${_("Your import was successful.")}');
window.location = '${successful_import_redirect_url}'; window.location = '${successful_import_redirect_url}';
} },
else fail: function(e, data) {
alert('${_("Your import has failed.")}\n\n' + xhr.responseText); alert('${_("Your import has failed.")}\n\n');
submitBtn.show(); },
bar.hide();
}
}); });
})(); })();
</script> </script>
</%block> </%block>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment