Commit e0ab75fb by Julian Arni

Add support for multiple file uploads

parent 547d4419
...@@ -149,14 +149,14 @@ def upload_asset(request, org, course, coursename): ...@@ -149,14 +149,14 @@ def upload_asset(request, org, course, coursename):
logging.error('Could not find course' + location) logging.error('Could not find course' + location)
return HttpResponseBadRequest() return HttpResponseBadRequest()
if 'file' not in request.FILES: if 'files[]' not in request.FILES:
return HttpResponseBadRequest() return HttpResponseBadRequest()
# compute a 'filename' which is similar to the location formatting, we're # compute a 'filename' which is similar to the location formatting, we're
# using the 'filename' nomenclature since we're using a FileSystem paradigm # using the 'filename' nomenclature since we're using a FileSystem paradigm
# here. We're just imposing the Location string formatting expectations to # here. We're just imposing the Location string formatting expectations to
# keep things a bit more consistent # keep things a bit more consistent
upload_file = request.FILES['file'] upload_file = request.FILES['files[]']
filename = upload_file.name filename = upload_file.name
mime_type = upload_file.content_type mime_type = upload_file.content_type
......
$(document).ready(function() { $(document).ready(function() {
$('.uploads .upload-button').bind('click', showUploadModal); $('.uploads .upload-button').bind('click', showUploadModal);
$('.upload-modal .close-button').bind('click', hideModal); $('.upload-modal .close-button').bind('click', resetUploadModal);
$('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu); $('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu);
$('.remove-asset-button').bind('click', removeAsset); $('.remove-asset-button').bind('click', removeAsset);
}); });
...@@ -52,11 +52,47 @@ function removeAsset(e){ ...@@ -52,11 +52,47 @@ function removeAsset(e){
function showUploadModal(e) { function showUploadModal(e) {
e.preventDefault(); e.preventDefault();
resetUploadBar();
$modal = $('.upload-modal').show(); $modal = $('.upload-modal').show();
$('.upload-modal .file-chooser').fileupload({
dataType: 'json',
type: 'POST',
maxChunkSize: 100 * 1000 * 1000, // 100 MB
autoUpload: true,
progressall: function(e, data) {
var percentComplete = parseInt(data.loaded / data.total * 100, 10);
showUploadFeedback(e, percentComplete);
},
maxFileSize: 10 * 1000 * 1000, // 100 MB
maxNumberofFiles: 30,
add: function(e, data) {
// Uncomment this line to get html template on load
// var html = assetUploadTemplate(data.files);
data.process().done(function () {
data.submit();
});
},
done: function(e, data) {
displayFinishedUpload(data.result);
}
});
$('.file-input').bind('change', startUpload); $('.file-input').bind('change', startUpload);
$modalCover.show(); $modalCover.show();
} }
function assetUploadTemplate(files) {
var compiled = _.template('<tr class="modal-asset>' +
'<td><span class="modal-asset new"></span></td>' +
'<td><p class="modal-asset name"> <%= file.name %></td>' +
'</tr>');
var html = '';
for (var i=0; i < files.length; i++) {
html += compiled({ file: files[i]});
}
return html;
}
function showFileSelectionMenu(e) { function showFileSelectionMenu(e) {
e.preventDefault(); e.preventDefault();
$('.file-input').click(); $('.file-input').click();
...@@ -69,11 +105,6 @@ function startUpload(e) { ...@@ -69,11 +105,6 @@ function startUpload(e) {
$('.upload-modal h1').html(gettext('Uploading…')); $('.upload-modal h1').html(gettext('Uploading…'));
$('.upload-modal .file-name').html(files[0].name); $('.upload-modal .file-name').html(files[0].name);
$('.upload-modal .file-chooser').ajaxSubmit({
beforeSend: resetUploadBar,
uploadProgress: showUploadFeedback,
complete: displayFinishedUpload
});
$('.upload-modal .choose-file-button').hide(); $('.upload-modal .choose-file-button').hide();
$('.upload-modal .progress-bar').removeClass('loaded').show(); $('.upload-modal .progress-bar').removeClass('loaded').show();
} }
...@@ -84,18 +115,27 @@ function resetUploadBar() { ...@@ -84,18 +115,27 @@ function resetUploadBar() {
$('.upload-modal .progress-fill').html(percentVal); $('.upload-modal .progress-fill').html(percentVal);
} }
function showUploadFeedback(event, position, total, percentComplete) { function resetUploadModal() {
resetUploadBar();
$('.upload-modal .file-name').html('');
$('.upload-modal h1').html(gettext('Upload New File'));
$('.upload-modal .choose-file-button').html(gettext('Choose File'));
$('.upload-modal .embeddable-xml-input').val('');
$('.upload-modal .embeddable').hide();
hideModal();
}
function showUploadFeedback(event, percentComplete) {
var percentVal = percentComplete + '%'; var percentVal = percentComplete + '%';
$('.upload-modal .progress-fill').width(percentVal); $('.upload-modal .progress-fill').width(percentVal);
$('.upload-modal .progress-fill').html(percentVal); $('.upload-modal .progress-fill').html(percentVal);
} }
function displayFinishedUpload(xhr) { function displayFinishedUpload(resp) {
if (xhr.status == 200) { if (resp.status == 200) {
markAsLoaded(); markAsLoaded();
} }
var resp = JSON.parse(xhr.responseText);
$('.upload-modal .embeddable-xml-input').val(resp.portable_url); $('.upload-modal .embeddable-xml-input').val(resp.portable_url);
$('.upload-modal .embeddable').show(); $('.upload-modal .embeddable').show();
$('.upload-modal .file-name').hide(); $('.upload-modal .file-name').hide();
......
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
<%block name="jsextra"> <%block name="jsextra">
<script src="${static.url('js/vendor/mustache.js')}"></script> <script src="${static.url('js/vendor/mustache.js')}"></script>
<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>
</%block> </%block>
<%block name="content"> <%block name="content">
...@@ -128,7 +130,7 @@ ...@@ -128,7 +130,7 @@
<form class="file-chooser" action="${upload_asset_callback_url}" <form class="file-chooser" action="${upload_asset_callback_url}"
method="post" enctype="multipart/form-data"> method="post" enctype="multipart/form-data">
<a href="#" class="choose-file-button">Choose File</a> <a href="#" class="choose-file-button">Choose File</a>
<input type="file" class="file-input" name="file"> <input type="file" class="file-input" name="files[]" multiple>
</form> </form>
</div> </div>
</div> </div>
......
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