From e0ab75fb84301e214cd62eccdd9cdf65158ee294 Mon Sep 17 00:00:00 2001 From: Julian Arni Date: Mon, 19 Aug 2013 16:32:57 -0400 Subject: [PATCH 1/5] Add support for multiple file uploads --- cms/djangoapps/contentstore/views/assets.py | 4 +- cms/static/js/views/assets.js | 60 +++++++++++++++++---- cms/templates/asset_index.html | 30 ++++++----- 3 files changed, 68 insertions(+), 26 deletions(-) diff --git a/cms/djangoapps/contentstore/views/assets.py b/cms/djangoapps/contentstore/views/assets.py index 4743622fa8..71e4073ed2 100644 --- a/cms/djangoapps/contentstore/views/assets.py +++ b/cms/djangoapps/contentstore/views/assets.py @@ -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 diff --git a/cms/static/js/views/assets.js b/cms/static/js/views/assets.js index 4b0b97180a..0a9f805f14 100644 --- a/cms/static/js/views/assets.js +++ b/cms/static/js/views/assets.js @@ -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('' + + '

<%= file.name %>' + + ''); + 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(); diff --git a/cms/templates/asset_index.html b/cms/templates/asset_index.html index c681cf5058..344c24baad 100644 --- a/cms/templates/asset_index.html +++ b/cms/templates/asset_index.html @@ -8,6 +8,8 @@ <%block name="jsextra"> + + <%block name="content"> @@ -114,26 +116,26 @@

- -
-

Upload New File

-

-

-
-
+ +
+

Upload New File

+

+

+
+
-
- Choose File - -
-
-
+ Choose File + + +
+ -
+
From b797118811e3e0d66ef537f46bc4cb8e6b82f1b6 Mon Sep 17 00:00:00 2001 From: Julian Arni Date: Thu, 29 Aug 2013 17:22:07 -0400 Subject: [PATCH 2/5] review fixes --- cms/static/js/views/assets.js | 16 +--------------- cms/templates/asset_index.html | 28 ++++++++++++++-------------- 2 files changed, 15 insertions(+), 29 deletions(-) diff --git a/cms/static/js/views/assets.js b/cms/static/js/views/assets.js index 0a9f805f14..8fc0b325df 100644 --- a/cms/static/js/views/assets.js +++ b/cms/static/js/views/assets.js @@ -64,10 +64,8 @@ function showUploadModal(e) { showUploadFeedback(e, percentComplete); }, maxFileSize: 10 * 1000 * 1000, // 100 MB - maxNumberofFiles: 30, + maxNumberofFiles: 100, add: function(e, data) { - // Uncomment this line to get html template on load - // var html = assetUploadTemplate(data.files); data.process().done(function () { data.submit(); }); @@ -81,18 +79,6 @@ function showUploadModal(e) { $modalCover.show(); } -function assetUploadTemplate(files) { - var compiled = _.template('' + - '

<%= file.name %>' + - ''); - 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(); diff --git a/cms/templates/asset_index.html b/cms/templates/asset_index.html index 344c24baad..a7c250e750 100644 --- a/cms/templates/asset_index.html +++ b/cms/templates/asset_index.html @@ -42,12 +42,12 @@

- Content - > Files & Uploads + ${_("Content")} + > ${_("Files & Uploads")}