1 files changed, 69 insertions, 55 deletions
diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index 677b282bd61..5b1743bb30e 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -1,71 +1,85 @@
 <script>
-  export default {
-    props: {
-      branchId: {
-        type: String,
-        required: true,
-      },
-      path: {
-        type: String,
-        required: false,
-        default: '',
-      },
+import Icon from '~/vue_shared/components/icon.vue';
+import ItemButton from './button.vue';
+
+export default {
+  components: {
+    Icon,
+    ItemButton,
+  },
+  props: {
+    path: {
+      type: String,
+      required: false,
+      default: '',
     },
-    mounted() {
-      this.$refs.fileUpload.addEventListener('change', this.openFile);
+    showLabel: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    beforeDestroy() {
-      this.$refs.fileUpload.removeEventListener('change', this.openFile);
+    buttonCssClasses: {
+      type: String,
+      required: false,
+      default: null,
     },
-    methods: {
-      createFile(target, file, isText) {
-        const { name } = file;
-        let { result } = target;
+  },
+  mounted() {
+    this.$refs.fileUpload.addEventListener('change', this.openFile);
+  },
+  beforeDestroy() {
+    this.$refs.fileUpload.removeEventListener('change', this.openFile);
+  },
+  methods: {
+    createFile(target, file, isText) {
+      const { name } = file;
+      let { result } = target;
 
-        if (!isText) {
-          // eslint-disable-next-line prefer-destructuring
-          result = result.split('base64,')[1];
-        }
+      if (!isText) {
+        // eslint-disable-next-line prefer-destructuring
+        result = result.split('base64,')[1];
+      }
 
-        this.$emit('create', {
-          name: `${(this.path ? `${this.path}/` : '')}${name}`,
-          branchId: this.branchId,
-          type: 'blob',
-          content: result,
-          base64: !isText,
-        });
-      },
-      readFile(file) {
-        const reader = new FileReader();
-        const isText = file.type.match(/text.*/) !== null;
+      this.$emit('create', {
+        name: `${this.path ? `${this.path}/` : ''}${name}`,
+        type: 'blob',
+        content: result,
+        base64: !isText,
+      });
+    },
+    readFile(file) {
+      const reader = new FileReader();
+      const isText = file.type.match(/text.*/) !== null;
 
-        reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
+      reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
 
-        if (isText) {
-          reader.readAsText(file);
-        } else {
-          reader.readAsDataURL(file);
-        }
-      },
-      openFile() {
-        Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
-      },
-      startFileUpload() {
-        this.$refs.fileUpload.click();
-      },
+      if (isText) {
+        reader.readAsText(file);
+      } else {
+        reader.readAsDataURL(file);
+      }
+    },
+    openFile() {
+      Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
     },
-  };
+    startFileUpload() {
+      this.$refs.fileUpload.click();
+    },
+  },
+};
 </script>
 
 <template>
   <div>
-    <a
-      href="#"
-      role="button"
-      @click.stop.prevent="startFileUpload"
-    >
-      {{ __('Upload file') }}
-    </a>
+    <item-button
+      :class="buttonCssClasses"
+      :show-label="showLabel"
+      :icon-classes="showLabel ? 'mr-2' : ''"
+      :label="__('Upload file')"
+      class="d-flex"
+      icon="upload"
+      @click="startFileUpload"
+    />
     <input
       id="file-upload"
       ref="fileUpload"