Add support for multiple file uploads

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
 

cms/static/js/views/assets.js

 $(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();

cms/templates/asset_index.html

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