better handling of unknown files, better upload display

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,
+        '-type-' + this.type,
-        '-' + this.size,
+        this.size && '-size-' + this.size,
         `-${this.useContainFit ? 'contain' : 'cover'}-fit`
       ]
     },

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"

src/components/gallery/gallery.js

@@ -38,6 +38,13 @@ const Gallery = {
         if (attachment.mimetype.includes('audio')) {
           return [...acc, { audio: true, items: [attachment] }, { items: [] }]
         }
+        if (!(
+          attachment.mimetype.includes('image') ||
+            attachment.mimetype.includes('video') ||
+            attachment.mimetype.includes('flash')
+        )) {
+          return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
+        }
         const maxPerRow = this.maxPerRow || 3
         const attachmentsRemaining = this.attachments.length - i + 1
         const currentRow = acc[acc.length - 1].items
@@ -52,7 +59,15 @@ const Gallery = {
     },
     attachmentsDimensionalScore () {
       return this.rows.reduce((acc, row) => {
-        return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6)))
+        let size = 0
+        if (row.minimal) {
+          size += 1 / 8
+        } else if (row.audio) {
+          size += 1 / 4
+        } else {
+          size += 1 / (row.items.length + 0.6)
+        }
+        return acc + size
       }, 0)
     },
     tooManyAttachments () {

src/components/post_status_form/post_status_form.vue

@@ -338,6 +338,10 @@
 .post-status-form {
   position: relative;
 
+  .attachments {
+    margin-bottom: 0.5em;
+  }
+
   .form-bottom {
     display: flex;
     justify-content: space-between;