Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make client-side use jquery-file-upload

Browse Source
This commit is contained in:
Julian Arni
2013-08-14 10:34:30 -04:00
parent b6795b4e88
commit 50934d4d45
1 changed files with 39 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
cms/templates/import.html
View File

@@ -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>${_("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>
<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>
<p class="error-block"></p>
<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>
<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="file" name="course-data" class="file-input" >
<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-fill"></div>
<div class="percent">0%</div>
@@ -43,6 +45,9 @@
</%block>
<%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>
(function() {
@@ -52,31 +57,43 @@ var percent = $('.percent');
var status = $('#status');
var submitBtn = $('.submit-button');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
$('#fileupload').fileupload({
dataType: 'json',
type: 'POST',
maxChunkSize: 20 * 1000000, // 20 MB
autoUpload: false,
add: function(e, data) {
submitBtn.show().click(function(e){
e.preventDefault();
data.submit();
});
},
progressall: function(e, data){
var percentVal = parseInt(data.loaded / data.total * 100, 10) + "%";
bar.show();
fill.width(percentVal);
percent.html(percentVal);
submitBtn.hide();
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
fill.width(percentVal);
percent.html(percentVal);
},
complete: function(xhr) {
if (xhr.status == 200) {
done: function(e, data){
bar.hide();
percent.html("Unpacking files...");
alert('${_("Your import was successful.")}');
window.location = '${successful_import_redirect_url}';
}
else
alert('${_("Your import has failed.")}\n\n' + xhr.responseText);
submitBtn.show();
bar.hide();
}
});
},
fail: function(e, data) {
alert('${_("Your import has failed.")}\n\n');
},
});
})();
</script>
</%block>