FEATURE: upload placeholder

app/assets/javascripts/discourse/lib/utilities.js

@@ -215,6 +215,10 @@ Discourse.Utilities = {
     }
   },
 
+  getUploadPlaceholder: function(filename) {
+    return "[" + I18n.t("uploading_filename", { filename: filename }) + "]() ";
+  },
+
   isAnImage: function(path) {
     return (/\.(png|jpe?g|gif|bmp|tiff?|svg|webp)$/i).test(path);
   },

app/assets/javascripts/discourse/views/composer.js.es6

@@ -322,8 +322,9 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
     this.messageBus.subscribe("/uploads/composer", upload => {
       if (!cancelledByTheUser) {
         if (upload && upload.url) {
-          const markdown = Discourse.Utilities.getUploadMarkdown(upload);
-          this.addMarkdown(markdown + " ");
+          const old = Discourse.Utilities.getUploadPlaceholder(upload.original_filename),
+                markdown = Discourse.Utilities.getUploadMarkdown(upload);
+          this.replaceMarkdown(old, markdown);
         } else {
           Discourse.Utilities.displayErrorForUpload(upload);
         }
@@ -350,6 +351,10 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
       this.get("controller").send("closeModal");
       // deal with cancellation
       cancelledByTheUser = false;
+      // add upload placeholder
+      const markdown = Discourse.Utilities.getUploadPlaceholder(data.files[0].name);
+      this.addMarkdown(markdown);
+      //
       if (data["xhr"]) {
         const jqHXR = data.xhr();
         if (jqHXR) {
@@ -502,6 +507,11 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
     });
   },
 
+  replaceMarkdown(old, text) {
+    const reply = this.get("model.reply");
+    this.set("model.reply", reply.replace(old, text));
+  },
+
   // Uses javascript to get the image sizes from the preview, if present
   imageSizes() {
     const result = {};

config/locales/client.en.yml

@@ -245,6 +245,7 @@ en:
 
     upload: "Upload"
     uploading: "Uploading..."
+    uploading_filename: "Uploading {{filename}}..."
     uploaded: "Uploaded!"
 
     enable: "Enable"