finish up attachment setting (right now only for admin section only)

src/components/settings_modal/helpers/attachment_setting.js

@@ -7,10 +7,10 @@ export default {
   ...Setting,
   props: {
     ...Setting.props,
-    type: {
-      type: Array,
+    acceptTypes: {
+      type: String,
       required: false,
-      default: []
+      default: 'image/*'
     }
   },
   components: {
@@ -22,6 +22,7 @@ export default {
     ...Setting.computed,
     attachment () {
       const path = this.realDraftMode ? this.draft : this.state
+      // The "server" part is primarily for local dev, but could be useful for alt-domain or multiuser usage.
       const url = path.includes('://') ? path : this.$store.state.instance.server + path
       return {
         mimetype: fileTypeExt(url),

src/components/settings_modal/helpers/attachment_setting.vue

@@ -20,24 +20,8 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <div class="attachment-input">
-      <Attachment
-        class="attachment"
-        :compact="compact"
-        :attachment="attachment"
-        size="small"
-        hide-description
-        @setMedia="onMedia"
-        @naturalSizeLoad="onNaturalSizeLoad"
-      />
+      <div>{{ $t('settings.url') }}</div>
       <div class="controls">
-        <media-upload
-          normal-button
-          ref="mediaUpload"
-          class="media-upload-icon"
-          :drop-files="dropFiles"
-          @uploaded="setMediaFile"
-          @upload-failed="uploadFailed"
-        />
         <input
           :id="path"
           class="string-input"
@@ -52,6 +36,27 @@
         />
         <ProfileSettingIndicator :is-profile="isProfileSetting" />
       </div>
+      <div>{{ $t('settings.preview') }}</div>
+      <Attachment
+        class="attachment"
+        :compact="compact"
+        :attachment="attachment"
+        size="small"
+        hide-description
+        @setMedia="onMedia"
+        @naturalSizeLoad="onNaturalSizeLoad"
+      />
+      <div class="controls">
+        <MediaUpload
+          ref="mediaUpload"
+          class="media-upload-icon"
+          :drop-files="dropFiles"
+          @uploaded="setMediaFile"
+          @upload-failed="uploadFailed"
+          normal-button
+          :accept-types="acceptTypes"
+        />
+      </div>
     </div>
     <DraftButtons />
   </span>
@@ -63,8 +68,24 @@
 .AttachmentSetting {
   .attachment {
     display: block;
-    width: 20em;
+    width: 100%;
     height: 15em;
+    margin-bottom: 0.5em;
+  }
+
+  .attachment-input {
+    margin-left: 1em;
+    display: flex;
+    flex-direction: column;
+    width: 20em;
+  }
+
+  .controls {
+    margin-bottom: 0.5em;
+
+    input, button {
+      width: 100%;
+    }
   }
 }
 </style>