WIP: Support Uploading Additional Video Files

cds/modules/deposit/static/templates/cds_deposit/deposits.html

@@ -39,6 +39,7 @@ <h5 class="text-muted"><strong>Tips</strong></h5>
                     <h3>Click here to select videos to upload</h3>
                   </div>
                   <p class="cds-deposit-box-upload-description">You can also <strong>Drag & Drop</strong> video files here</p>
+                  <p class="text-muted mt-20">supported files <mark>{{ $ctrl.videoExtensions }}</mark></p>
                 </div>
               </div>
             </div>

cds/modules/deposit/static/templates/cds_deposit/types/video/uploader.html

@@ -283,6 +283,7 @@ <h5 class="text-muted"><strong>Tips and suggestions</strong></h5>
   </ul>
 </div>
 <!-- Error alert -->
+
 <div class="cds-deposit-box" ng-if="!$ctrl.cdsDepositCtrl.isPublished()">
   <div
        ngf-drag-over-class="'cds-deposit-dragover'"
@@ -309,8 +310,31 @@ <h4>Upload complimentary files for this video</h4>
   <div class="text-muted">
     <h5 class="text-muted"><strong>Tips and suggestions</strong></h5>
     <ul>
-      <li>To replace the video file, just upload another video.</li>
+      <li>To replace the video file, just upload another video to here.</li>
     </ul>
+    <div
+      ngf-drag-over-class="{accept: 'cds-deposit-dragover',  delay:100}"
+      ngf-drop=""
+      ngf-change="$ctrl.replaceMasterFile($newFiles, $invalidFiles)"
+      ngf-select=""
+      ngf-model-options="{allowInvalid: false}"
+      ngf-max-size="500GB"
+      ngf-multiple="true"
+      ngf-accept="'{{$ctrl.cdsDepositsCtrl.videoExtensions}}'"
+      ngf-pattern="'{{$ctrl.cdsDepositsCtrl.videoExtensions}}'"
+  >
+  <div class="pa-10 cds-deposit-box-upload-wrapper text-center">
+    <p class="cds-deposit-box-upload-icon mb-20">
+      <i class="fa fa-2x fa-video-camera" aria-hidden="true"></i>
+    </p>
+    <div class="cds-deposit-box-upload-content">
+      <div class="cds-deposit-box-upload-title">
+        <h4>To replace the video file, just upload a video to here.</h4>
+      </div>
+      <p class="cds-deposit-box-upload-description"> Or Drag & Drop files</p>
+    </div>
+  </div>
+  </div>
   </div>
 </div>
 <div ng-if="$ctrl.cdsDepositCtrl.isPublished()" class="cds-deposit-box text-muted">

cds/modules/theme/assets/bootstrap3/js/cds_deposit/avc/components/cdsUploader.js

@@ -115,7 +115,7 @@ function cdsUploaderCtrl(
         if (!upload.key) {
           upload.key = upload.name;
         }
-        if (that.cdsDepositsCtrl.isVideoFile(upload.key)) {
+        if (!upload.isAdditional && that.cdsDepositsCtrl.isVideoFile(upload.key)) {
           _subpromise = Upload.http(_startWorkflow(upload, response));
         } else {
           var d = $q.defer();
@@ -282,21 +282,13 @@ function cdsUploaderCtrl(
       angular.forEach(_files, function (file) {
         file.key = file.name;
         file.local = !file.receiver;
+        file.isAdditional = true;
         // Add any extra paramemters to the files
         if (extraHeaders) {
           file.headers = extraHeaders;
         }
       });
 
-      // Add the files to the list
-      var masterFile = that.cdsDepositCtrl.findMasterFile() || {};
-      var videoFiles = _.values(
-        that.cdsDepositsCtrl.filterOutFiles(_files).videos
-      );
-
-      // Exclude video files
-      _files = _.difference(_files, videoFiles);
-
       // Find if any of the existing files has been replaced
       // (file with same filename), and if yes remove it from the existing
       // file list (aka from the interface).
@@ -323,6 +315,45 @@ function cdsUploaderCtrl(
       Array.prototype.push.apply(that.files, _files);
       // Add the files to the queue
       Array.prototype.push.apply(that.queue, _files);
+
+      // Start upload automatically if the option is selected
+      if (that.autoStartUpload) {
+        that.upload();
+      }
+    };
+
+    this.replaceMasterFile = function(_files, invalidFiles){
+      // Do nothing if files array is empty
+      if (!_files) {
+        return;
+      }
+      // Remove any invalid files
+      _files = _.difference(_files, invalidFiles || []);
+      // Make sure they have proper metadata
+      angular.forEach(_files, function (file) {
+        file.key = file.name;
+        file.local = !file.receiver;
+      });
+
+      // Add the files to the list
+      var masterFile = that.cdsDepositCtrl.findMasterFile() || {};
+      var videoFiles = _.values(
+        that.cdsDepositsCtrl.filterOutFiles(_files).videos
+      );
+
+
+      if ((invalidFiles || []).length > 0) {
+        // Push a notification
+        toaster.pop({
+          type: "error",
+          title:
+            "Invalid file(s) for " +
+            (that.cdsDepositCtrl.record.title.title || "video."),
+          body: _.map(invalidFiles, "name").join(", "),
+          bodyOutputType: "trustedHtml",
+        });
+      }
+
       if (!that.cdsDepositCtrl.master) {
         // Check for new master file
         var newMasterFile = videoFiles[0];
@@ -359,10 +390,6 @@ function cdsUploaderCtrl(
         }
       }
 
-      // Start upload automatically if the option is selected
-      if (that.autoStartUpload) {
-        that.upload();
-      }
     };
 
     // Prepare file request