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

src/components/media_upload/media_upload.js

@@ -23,6 +23,11 @@ const mediaUpload = {
     }
   },
   methods: {
+    onClick () {
+      if (this.uploadReady) {
+        this.$refs.input.click()
+      }
+    },
     uploadFile (file) {
       const self = this
       const store = this.$store
@@ -69,10 +74,15 @@ const mediaUpload = {
       this.multiUpload(target.files)
     }
   },
-  props: [
-    'dropFiles',
-    'disabled'
-  ],
+  props: {
+    dropFiles: Object,
+    disabled: Boolean,
+    normalButton: Boolean,
+    acceptTypes: {
+      type: String,
+      default: '*/*'
+    }
+  },
   watch: {
     dropFiles: function (fileInfos) {
       if (!this.uploading) {

src/components/media_upload/media_upload.vue

@@ -1,8 +1,10 @@
 <template>
-  <label
+  <component
     class="media-upload"
-    :class="{ disabled: disabled }"
+    :is="normalButton ? 'button' : 'label'"
+    :class="{ disabled: disabled, ['media-upload button-default btn']: normalButton }"
     :title="$t('tool_tip.media_upload')"
+    @click="onClick"
   >
     <FAIcon
       v-if="uploading"
@@ -15,6 +17,10 @@
       class="new-icon"
       icon="upload"
     />
+    <template v-if="normalButton">
+      {{ ' ' }}
+      {{ uploading ? $t('general.loading') : $t('tool_tip.media_upload') }}
+    </template>
     <input
       v-if="uploadReady"
       class="hidden-input-file"
@@ -22,8 +28,10 @@
       type="file"
       multiple="true"
       @change="change"
+      ref="input"
+      :accept="acceptTypes"
     >
-  </label>
+  </component>
 </template>
 
 <script src="./media_upload.js"></script>
@@ -32,10 +40,12 @@
 @import "../../variables";
 
 .media-upload {
-  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
-
   .hidden-input-file {
     display: none;
   }
 }
+
+label.media-upload {
+  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
+}
 </style>

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>

src/i18n/en.json

@@ -519,6 +519,8 @@
     "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
     "mutes_tab": "Mutes",
     "play_videos_in_modal": "Play videos in a popup frame",
+    "url": "URL",
+    "preview": "Preview",
     "file_export_import": {
       "backup_restore": "Settings backup",
       "backup_settings": "Backup settings to file",