2 files changed, 34 insertions, 4 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 84656ffa..bd424087 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -65,10 +65,11 @@ const Attachment = {
       return [
         {
           '-loading': this.loading,
-          '-nsfw-placeholder': this.hidden
+          '-nsfw-placeholder': this.hidden,
+          '-editable': this.edit !== undefined
         },
-        '-' + this.type,
-        '-' + this.size,
+        '-type-' + this.type,
+        this.size && '-size-' + this.size,
         `-${this.useContainFit ? 'contain' : 'cover'}-fit`
       ]
     },
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 9b1e83a7..b8be82da 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -15,8 +15,37 @@
       @click.prevent=""
     >
       <FAIcon :icon="placeholderIconClass" />
-      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
+      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ this.edit ? '' : placeholderName }}
     </a>
+    <div
+      class="attachment-buttons"
+      v-if="edit || remove"
+      >
+      <button
+        v-if="remove"
+        class="button-unstyled attachment-button"
+        @click.prevent="onRemove"
+      >
+        <FAIcon icon="trash-alt" />
+      </button>
+    </div>
+    <div
+      v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"
+      class="description-container"
+      :class="{ '-static': !edit }"
+    >
+      <input
+        v-if="edit"
+        v-model="localDescription"
+        type="text"
+        class="description-field"
+        :placeholder="$t('post_status.media_description')"
+        @keydown.enter.prevent=""
+      >
+      <p v-else>
+        {{ localDescription }}
+      </p>
+    </div>
   </button>
   <div
     class="Attachment"