Enabled multiple uploads in the Web IDE

Closes #50405

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>

changelogs/unreleased/ide-multiple-file-uploads.yml

+---
+title: Enabled multiple file uploads in the Web IDE
+merge_request:
+author:
+type: added

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');