1 files changed, 58 insertions, 0 deletions
diff --git a/app/assets/javascripts/design_management/components/upload/button.vue b/app/assets/javascripts/design_management/components/upload/button.vue
new file mode 100644
index 00000000000..e3c5e369170
--- /dev/null
+++ b/app/assets/javascripts/design_management/components/upload/button.vue
@@ -0,0 +1,58 @@
+<script>
+import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
+
+export default {
+  components: {
+    GlDeprecatedButton,
+    GlLoadingIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    isSaving: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  methods: {
+    openFileUpload() {
+      this.$refs.fileUpload.click();
+    },
+    onFileUploadChange(e) {
+      this.$emit('upload', e.target.files);
+    },
+  },
+  VALID_DESIGN_FILE_MIMETYPE,
+};
+</script>
+
+<template>
+  <div>
+    <gl-deprecated-button
+      v-gl-tooltip.hover
+      :title="
+        s__(
+          'DesignManagement|Adding a design with the same filename replaces the file in a new version.',
+        )
+      "
+      :disabled="isSaving"
+      variant="success"
+      @click="openFileUpload"
+    >
+      {{ s__('DesignManagement|Add designs') }}
+      <gl-loading-icon v-if="isSaving" inline class="ml-1" />
+    </gl-deprecated-button>
+
+    <input
+      ref="fileUpload"
+      type="file"
+      name="design_file"
+      :accept="$options.VALID_DESIGN_FILE_MIMETYPE.mimetype"
+      class="hide"
+      multiple
+      @change="onFileUploadChange"
+    />
+  </div>
+</template>