diff --git a/app/assets/javascripts/discourse/lib/utilities.js.es6 b/app/assets/javascripts/discourse/lib/utilities.js.es6
index ceeb8c81835..9d35e18fc9a 100644
--- a/app/assets/javascripts/discourse/lib/utilities.js.es6
+++ b/app/assets/javascripts/discourse/lib/utilities.js.es6
@@ -291,13 +291,13 @@ function isGUID(value) {
 
 function imageNameFromFileName(fileName) {
   const split = fileName.split('.');
-  const name = split[split.length-2];
+  let name = split[split.length - 2];
 
   if (exports.isAppleDevice() && isGUID(name)) {
-    return I18n.t('upload_selector.default_image_alt_text');
+    name = I18n.t('upload_selector.default_image_alt_text');
   }
 
-  return name;
+  return encodeURIComponent(name);
 }
 
 export function allowsImages() {
diff --git a/test/javascripts/lib/utilities-test.js.es6 b/test/javascripts/lib/utilities-test.js.es6
index 4a11b4bca9a..9b5f4e4265a 100644
--- a/test/javascripts/lib/utilities-test.js.es6
+++ b/test/javascripts/lib/utilities-test.js.es6
@@ -123,6 +123,7 @@ var testUploadMarkdown = function(filename) {
 
 QUnit.test("getUploadMarkdown", assert => {
   assert.equal(testUploadMarkdown("lolcat.gif"),'![lolcat|100x200](/uploads/123/abcdef.ext)');
+  assert.equal(testUploadMarkdown("[foo|bar].png"),'![%5Bfoo%7Cbar%5D|100x200](/uploads/123/abcdef.ext)');
   assert.ok(testUploadMarkdown("important.txt") === '<a class="attachment" href="/uploads/123/abcdef.ext">important.txt</a> (42 Bytes)\n');
 });