Enabled multiple uploads in the Web IDE

Closes #50405

3 files changed, 24 insertions, 6 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index 5b1743bb30e..e2be805ed22 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -24,12 +24,6 @@ export default {
       default: null,
     },
   },
-  mounted() {
-    this.$refs.fileUpload.addEventListener('change', this.openFile);
-  },
-  beforeDestroy() {
-    this.$refs.fileUpload.removeEventListener('change', this.openFile);
-  },
   methods: {
     createFile(target, file, isText) {
       const { name } = file;
@@ -85,6 +79,8 @@ export default {
       ref="fileUpload"
       type="file"
       class="hidden"
+      multiple
+      @change="openFile"
     />
   </div>
 </template>
diff --git a/changelogs/unreleased/ide-multiple-file-uploads.yml b/changelogs/unreleased/ide-multiple-file-uploads.yml
new file mode 100644
index 00000000000..6bb73739864
--- /dev/null
+++ b/changelogs/unreleased/ide-multiple-file-uploads.yml
@@ -0,0 +1,5 @@
+---
+title: Enabled multiple file uploads in the Web IDE
+merge_request:
+author:
+type: added
diff --git a/spec/javascripts/ide/components/new_dropdown/upload_spec.js b/spec/javascripts/ide/components/new_dropdown/upload_spec.js
index 9c76500cfe5..70b885ede26 100644
--- a/spec/javascripts/ide/components/new_dropdown/upload_spec.js
+++ b/spec/javascripts/ide/components/new_dropdown/upload_spec.js
@@ -21,6 +21,23 @@ describe('new dropdown upload', () => {
     vm.$destroy();
   });
 
+  describe('openFile', () => {
+    it('calls for each file', () => {
+      const files = ['test', 'test2', 'test3'];
+
+      spyOn(vm, 'readFile');
+      spyOnProperty(vm.$refs.fileUpload, 'files').and.returnValue(files);
+
+      vm.openFile();
+
+      expect(vm.readFile.calls.count()).toBe(3);
+
+      files.forEach((file, i) => {
+        expect(vm.readFile.calls.argsFor(i)).toEqual([file]);
+      });
+    });
+  });
+
   describe('readFile', () => {
     beforeEach(() => {
       spyOn(FileReader.prototype, 'readAsText');