diff --git a/static/js/media.js b/static/js/media.js
index 35a881f0..053f978f 100644
--- a/static/js/media.js
+++ b/static/js/media.js
@@ -157,7 +157,8 @@ $(document).ready(function(){
         csrf = $('#media-files').data('csrf');
         console.log('index blob',blobId, csrf);
         dialog = $('#dialog-box')
-        dialog.find(".modal-body").html('<p>Indexing ' + filename + '</p><div class="error"></div>');
+        dialog.find(".modal-body").html('<p>Indexing ' + encodeURIComponent(filename) +
+                                        '</p><div class="error"></div>');
         showDialog();
         $.ajax({
             url: '/media/'+blobId+'?index=1&csrf_token='+csrf,
@@ -168,14 +169,19 @@ $(document).ready(function(){
               var i;
               dialog.find('.modal-body .error').text(result.error);
             } else {
-                dialog.find(".modal-body").html('<p>Indexing ' + filename + ' complete</p>');
+                dialog.find(".modal-body").html('<p>Indexing ' +
+                                                encodeURIComponent(filename) +
+                                                ' complete</p>');
                 if (result.representation) {
                     $row.find('td.codec').text(result.representation.codecs);
                     if(result.representation.encrypted) {
                         $row.find('td.encrypted').html('<span class="bool-yes ">&check;</span>');
                         $row.find('td.kid').html("");
                         for(i=0; i < result.representation.kids.length; ++i) {
-                          $row.find('td.kid').append('<p>'+result.representation.kids[i]+'</p>');
+                            $row.find('td.kid').append(
+                                '<p>' +
+                                encodeURIComponent(result.representation.kids[i]) +
+                                '</p>');
                         }
                     } else {
                         $row.find('td.encrypted').html('<span class="bool-no ">&cross;</span>');
@@ -241,7 +247,9 @@ $(document).ready(function(){
         data = new FormData(form[0]);
         $("#upload-form .submit").prop("disabled", true);
         dialog = $('#dialog-box')
-        dialog.find(".modal-body").html('<p>Uploading ' + filename + '</p><div class="error"></div>');
+        dialog.find(".modal-body").html('<p>Uploading ' +
+                                        encodeURIComponent(filename) +
+                                        '</p><div class="error"></div>');
         showDialog();
         $.ajax({
             url: form.attr("action"),
@@ -261,7 +269,9 @@ $(document).ready(function(){
                 err.text(data.error);
                 return;
             }
-            dialog.find(".modal-body").html('<p>Finished uploading ' + filename+ '<span class="bool-yes ">&check;</span>');
+            dialog.find(".modal-body").html('<p>Finished uploading ' +
+                                            encodeURIComponent(filename) +
+                                            '<span class="bool-yes ">&check;</span>');
             if(data.upload_url) {
                 $('#upload-form').attr('action', data.upload_url);
             }