Fixed podcast file uploads and editing

Teknik/Areas/Podcast/Controllers/PodcastController.cs

@@ -155,6 +155,29 @@ namespace Teknik.Areas.Podcast.Controllers
             return Json(new { error = "No podcast found" });
         }
 
+        [HttpPost]
+        [AllowAnonymous]
+        public ActionResult GetPodcastFiles(int podcastId)
+        {
+            bool editor = User.IsInRole("Podcast");
+            var foundPodcast = db.Podcasts.Include("Files").Where(p => ((p.Published || editor) && p.PodcastId == podcastId)).FirstOrDefault();
+            if (foundPodcast != null)
+            {
+                List<object> files = new List<object>();
+                foreach (PodcastFile file in foundPodcast.Files)
+                {
+                    object fileObj = new
+                    {
+                        name = file.FileName,
+                        id = file.PodcastFileId
+                    };
+                    files.Add(fileObj);
+                }
+                return Json(new { result = new { files = files } });
+            }
+            return Json(new { error = "No podcast found" });
+        }
+
         [HttpPost]
         public ActionResult CreatePodcast(int episode, string title, string description)
         {
@@ -188,7 +211,7 @@ namespace Teknik.Areas.Podcast.Controllers
         }
 
         [HttpPost]
-        public ActionResult EditPodcast(int podcastId, int episode, string title, string description)
+        public ActionResult EditPodcast(int podcastId, int episode, string title, string description, string fileIds)
         {
             if (ModelState.IsValid)
             {
@@ -203,8 +226,20 @@ namespace Teknik.Areas.Podcast.Controllers
                             podcast.Title = title;
                             podcast.Description = description;
                             podcast.DateEdited = DateTime.Now;
+                            // Remove any files not in fileIds
+                            List<string> fileIdList = fileIds.Split(',').ToList();
+                            for (int i = 0; i < podcast.Files.Count; i++)
+                            {
+                                PodcastFile curFile = podcast.Files[i];
+                                if (!fileIdList.Exists(id => id == curFile.PodcastFileId.ToString()))
+                                {
+                                    podcast.Files.Remove(curFile);
+                                }
+                            }
+                            // Add any new files
                             List<PodcastFile> newFiles = SaveFiles(Request.Files, episode);
                             podcast.Files.AddRange(newFiles);
+                            // Save podcast
                             db.Entry(podcast).State = EntityState.Modified;
                             db.SaveChanges();
                             return Json(new { result = true });

Teknik/Areas/Podcast/Scripts/Podcast.js

@@ -15,7 +15,6 @@
         fd.append("episode", episode);
         fd.append("title", title);
         fd.append("description", description);
-        fd.append('__RequestVerificationToken', $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val());
 
         var xhr = new XMLHttpRequest();
         xhr.open('POST', addPodcastURL);
@@ -35,7 +34,7 @@
                     $("#top_msg").html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + error + '</div>');
                 }
             }
-        }
+        };
         return false;
     });
 
@@ -43,6 +42,8 @@
         $("#edit_podcast_episode").val("");
         $("#edit_podcast_title").val("");
         $("#edit_podcast_description").val("");
+        $("#edit_podcast_cur_file_list").val("");
+        $("#edit_podcast_cur_files").html('');
         podcastId = $(e.relatedTarget).attr("id");
         $("#edit_podcast_podcastId").val(podcastId);
         $.ajax({
@@ -75,28 +76,73 @@
                 }
             }
         });
+        $.ajax({
+            type: "POST",
+            url: getPodcastFilesURL,
+            data: { podcastID: podcastId },
+            success: function (html) {
+                if (html.result) {
+                    var files = html.result.files
+                    var fileList = [];
+                    for (var i = 0; i < files.length; i++) {
+                        var fileId = files[i].id;
+                        var fileName = files[i].name;
+                        $("#edit_podcast_cur_file_list").append(' \
+                                                        <div class="alert alert-success uploaded_file_' + fileId + '"> \
+                                                            <button type="button" class="close podcast_file_delete" id="' + fileId + '">&times;</button> \
+                                                            ' + fileName + ' \
+                                                        </div> \
+                                                        ');
+                        fileList[i] = fileId;
+                        linkEditFileDelete('.podcast_file_delete');
+                    }
+                    $("#edit_podcast_cur_files").val(fileList.toString());
+                }
+            }
+        });
     });
 
     $("#edit_submit").click(function () {
+        $.blockUI({ message: '<div class="text-center"><h3>Saving...</h3></div>' });
         $('#editPodcast').modal('hide');
+        var fd = new FormData();
+        var fileInput = document.getElementById('edit_podcast_files');
+        for (i = 0; i < fileInput.files.length; i++) {
+            //Appending each file to FormData object
+            fd.append(fileInput.files[i].name, fileInput.files[i]);
+        }
+
         podcastId = $("#edit_podcast_podcastId").val();
         episode = $("#edit_podcast_episode").val();
         title = $("#edit_podcast_title").val();
         description = $("#edit_podcast_description").val();
-        $.ajax({
-            type: "POST",
-            url: editPodcastURL,
-            data: { podcastId: podcastId, episode: episode, title: title, description: description },
-            success: function (html) {
-                if (html.result) {
+        allFiles = $("#edit_podcast_cur_files").val();
+        
+        fd.append("podcastId", podcastId);
+        fd.append("episode", episode);
+        fd.append("title", title);
+        fd.append("description", description);
+        fd.append("fileIds", allFiles);
+
+        var xhr = new XMLHttpRequest();
+        xhr.open('POST', editPodcastURL);
+        xhr.send(fd);
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                obj = JSON.parse(xhr.responseText);
+                $.unblockUI();
+                if (obj.result) {
                     window.location.reload();
                 }
                 else {
+                    var error = obj;
+                    if (obj.error)
+                        error = obj.error;
                     $("#top_msg").css('display', 'inline', 'important');
-                    $("#top_msg").html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + html.error + '</div>');
+                    $("#top_msg").html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + error + '</div>');
                 }
             }
-        });
+        };
         return false;
     });
 
@@ -276,6 +322,22 @@ function linkPodcastDelete(selector) {
     });
 }
 
+function linkEditFileDelete(selector) {
+    $(selector).click(function () {
+        var object = $(this);
+        podFile = object.attr('id');
+        allFiles = $("#edit_podcast_cur_files").val();
+        var fileList = allFiles.split(',');
+        var index = fileList.indexOf(podFile);
+        if (index != -1) {
+            fileList.splice(index, 1);
+            $("#edit_podcast_cur_files").val(fileList.toString());
+        }
+        $(".uploaded_file_" + podFile).remove();
+        return false;
+    });
+}
+
 function linkCommentDelete(selector) {
     $(selector).click(function () {
         var object = $(this);

Teknik/Areas/Podcast/Views/Podcast/Main.cshtml

@@ -9,6 +9,7 @@
     var getPodcastEpisodeURL = '@Url.SubRouteUrl("podcast", "Podcast.Action", new { action = "GetPodcastEpisode" })';
     var getPodcastTitleURL = '@Url.SubRouteUrl("podcast", "Podcast.Action", new { action = "GetPodcastTitle" })';
     var getPodcastDescriptionURL = '@Url.SubRouteUrl("podcast", "Podcast.Action", new { action = "GetPodcastDescription" })';
+    var getPodcastFilesURL = '@Url.SubRouteUrl("podcast", "Podcast.Action", new { action = "GetPodcastFiles" })';
     var publishPodcastURL = '@Url.SubRouteUrl("podcast", "Podcast.Action", new { action = "PublishPodcast" })';
     var addPodcastURL = '@Url.SubRouteUrl("podcast", "Podcast.Action", new { action = "CreatePodcast" })';
     var editPodcastURL = '@Url.SubRouteUrl("podcast", "Podcast.Action", new { action = "EditPodcast" })';
@@ -74,7 +75,7 @@
                         </div>
                         <div class="row">
                             <div class="form-group col-sm-12">
-                                <label for="podcast_files"><h4>Upload Podcast</h4></label>
+                                <label for="podcast_files"><h4>Add Podcasts</h4></label>
                                 <input id="podcast_files" name="podcast_files" type="file" placeholder="podcast.ogg" title="select the podcast file." multiple>
                             </div>
                         </div>
@@ -121,10 +122,14 @@
                         </div>
                         <div class="row">
                             <div class="form-group col-sm-12">
-                                <label for="edit_podcast_files"><h4>Upload Podcast</h4></label>
+                                <label for="edit_podcast_files"><h4>Add Podcasts</h4></label>
                                 <input id="edit_podcast_files" name="edit_podcast_files" type="file" placeholder="podcast.ogg" title="select the podcast file." multiple>
                             </div>
                         </div>
+                        <div class="row">
+                            <div class="form-group col-sm-12" id="edit_podcast_cur_files"></div>
+                            <input name="edit_podcast_cur_file_list" id="edit_podcast_cur_file_list" type="hidden" />
+                        </div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

Teknik/Areas/Podcast/Views/Podcast/ViewPodcast.cshtml

@@ -59,10 +59,14 @@
                                 </div>
                                 <div class="row">
                                     <div class="form-group col-sm-12">
-                                        <label for="edit_podcast_files"><h4>Upload Podcast</h4></label>
+                                        <label for="edit_podcast_files"><h4>Add Podcasts</h4></label>
                                         <input id="edit_podcast_files" name="edit_podcast_files" type="file" placeholder="podcast.ogg" title="select the podcast file." multiple>
                                     </div>
                                 </div>
+                                <div class="row">
+                                    <div class="form-group col-sm-12" id="edit_podcast_cur_files"></div>
+                                    <input name="edit_podcast_cur_file_list" id="edit_podcast_cur_file_list" type="hidden" />
+                                </div>
                             </div>
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>