Commit e0ab75fb by Julian Arni

Add support for multiple file uploads

parent 547d4419
......@@ -149,14 +149,14 @@ def upload_asset(request, org, course, coursename):
logging.error('Could not find course' + location)
return HttpResponseBadRequest()
if 'file' not in request.FILES:
if 'files[]' not in request.FILES:
return HttpResponseBadRequest()
# compute a 'filename' which is similar to the location formatting, we're
# using the 'filename' nomenclature since we're using a FileSystem paradigm
# here. We're just imposing the Location string formatting expectations to
# keep things a bit more consistent
upload_file = request.FILES['file']
upload_file = request.FILES['files[]']
filename = upload_file.name
mime_type = upload_file.content_type
......
$(document).ready(function() {
$('.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);
$('.remove-asset-button').bind('click', removeAsset);
});
......@@ -52,11 +52,47 @@ function removeAsset(e){
function showUploadModal(e) {
e.preventDefault();
resetUploadBar();
$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);
$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) {
e.preventDefault();
$('.file-input').click();
......@@ -69,11 +105,6 @@ function startUpload(e) {
$('.upload-modal h1').html(gettext('Uploading…'));
$('.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 .progress-bar').removeClass('loaded').show();
}
......@@ -84,18 +115,27 @@ function resetUploadBar() {
$('.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 + '%';
$('.upload-modal .progress-fill').width(percentVal);
$('.upload-modal .progress-fill').html(percentVal);
}
function displayFinishedUpload(xhr) {
if (xhr.status == 200) {
function displayFinishedUpload(resp) {
if (resp.status == 200) {
markAsLoaded();
}
var resp = JSON.parse(xhr.responseText);
$('.upload-modal .embeddable-xml-input').val(resp.portable_url);
$('.upload-modal .embeddable').show();
$('.upload-modal .file-name').hide();
......
......@@ -8,6 +8,8 @@
<%block name="jsextra">
<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 name="content">
......@@ -114,26 +116,26 @@
</div>
<div class="upload-modal modal">
<a href="#" class="close-button"><span class="close-icon"></span></a>
<div class="modal-body">
<h1>Upload New File</h1>
<p class="file-name"></a>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<a href="#" class="close-button"><span class="close-icon"></span></a>
<div class="modal-body">
<h1>Upload New File</h1>
<p class="file-name"></a>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<div class="embeddable">
<label>URL:</label>
<input type="text" class="embeddable-xml-input" value='' readonly>
</div>
<form class="file-chooser" action="${upload_asset_callback_url}"
<form class="file-chooser" action="${upload_asset_callback_url}"
method="post" enctype="multipart/form-data">
<a href="#" class="choose-file-button">Choose File</a>
<input type="file" class="file-input" name="file">
</form>
</div>
</div>
<a href="#" class="choose-file-button">Choose File</a>
<input type="file" class="file-input" name="files[]" multiple>
</form>
</div>
</div>
<div class="modal-cover"></div>
<div class="modal-cover"></div>
</%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