Delete files via ajax request instead to enhance flow when editing exercises

app/assets/javascripts/exercises.js.erb

@@ -76,6 +76,40 @@ $(function() {
     initializeEditor(latestTextAreaIndex, $('#files .editor').last()[0]);
   };
 
+  var removeFileForm = function(fileUrl) {
+    // validate fileUrl
+    var matches = fileUrl.match(/files\/(\d+)/);
+    if (matches) {
+      // select the file form based on the delete button
+      var fileForm = $('*[data-file-url="' + fileUrl + '"]').parent().parent().parent();
+      fileForm.remove();
+
+      // now remove the hidden input representing the file
+      var fileId = matches[1];
+      var input = $('input[type="hidden"][value="' + fileId + '"]')
+      input.remove()
+    }
+  }
+
+  var deleteFile = function(event) {
+    event.preventDefault();
+    var fileUrl = $(this).data('file-url');
+
+    if (confirm('<%= I18n.t('shared.confirm_destroy') %>')) {
+      var jqxhr = $.ajax({
+        // normal file path (without json) would destroy the context object (the exercise) as well, due to redirection
+        // to the context after the :destroy action.
+        contentType: 'Application/json',
+        url: fileUrl + '.json',
+        method: 'DELETE'
+      });
+      jqxhr.done(function () {
+        removeFileForm(fileUrl)
+      });
+      jqxhr.fail(ajaxError);
+    }
+  }
+
   var ajaxError = function() {
     $.flash.danger({
       text: $('#flash').data('message-failure')
@@ -121,6 +155,7 @@ $(function() {
     $('form.edit_exercise, form.new_exercise').on('submit', function() {
       $('#dummies').html('');
     });
+    $('.delete-file').on('click', deleteFile);
   };
 
   var findFileTypeByFileExtension = function(file_extension) {

app/views/exercises/_file_form.html.slim

@@ -8,7 +8,8 @@ li.panel.panel-default
   .panel-collapse.collapse class=('in' if f.object.name.nil?) id="collapse#{id}" role="tabpanel"
     .panel-body
       - if policy(f.object).destroy?
-        .clearfix = link_to(t('shared.destroy'), f.object, class: 'btn btn-warning btn-sm pull-right', data: {confirm: t('shared.confirm_destroy')}, method: :delete)
+        .clearfix
+          .btn.btn-warning.btn-sm.pull-right.delete-file data-file-url=code_ocean_file_path(id) = t('shared.destroy')
       .form-group
         = f.label(:name, t('activerecord.attributes.file.name'))
         = f.text_field(:name, class: 'form-control')