1 files changed, 56 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/upload_image_tab.vue b/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/upload_image_tab.vue
new file mode 100644
index 00000000000..739f8b502c9
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/upload_image_tab.vue
@@ -0,0 +1,56 @@
+<script>
+import { __ } from '~/locale';
+import { GlFormGroup } from '@gitlab/ui';
+import { MAX_FILE_SIZE } from '../../constants';
+
+export default {
+  components: {
+    GlFormGroup,
+  },
+  data() {
+    return {
+      file: null,
+      fileError: null,
+    };
+  },
+  fileLabel: __('Select file'),
+  methods: {
+    onInput(event) {
+      [this.file] = event.target.files;
+
+      this.validateFile();
+
+      if (!this.fileError) {
+        this.$emit('input', this.file);
+      }
+    },
+    validateFile() {
+      this.fileError = null;
+
+      if (!this.file) {
+        this.fileError = __('Please choose a file');
+      } else if (this.file.size > MAX_FILE_SIZE) {
+        this.fileError = __('Maximum file size is 2MB. Please select a smaller file.');
+      }
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-group
+    class="gl-mt-5 gl-mb-3"
+    :label="$options.fileLabel"
+    label-for="file-input"
+    :state="!Boolean(fileError)"
+    :invalid-feedback="fileError"
+  >
+    <input
+      id="file-input"
+      ref="fileInput"
+      class="gl-mt-3 gl-mb-2"
+      type="file"
+      accept="image/*"
+      @input="onInput"
+    />
+  </gl-form-group>
+</template>