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

Add support for multiple file uploads

Browse Source
This commit is contained in:
Julian Arni
2013-08-19 16:32:57 -04:00
parent 547d441954
commit e0ab75fb84
3 changed files with 68 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cms/djangoapps/contentstore/views/assets.py
View File

@@ -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

60
cms/static/js/views/assets.js
View File

@@ -1,6 +1,6 @@
$(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();

30
cms/templates/asset_index.html
View File

@@ -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>