Multi files selection and upload from Browser (#5711)

browser/app/js/browser/MainActions.js

@@ -33,7 +33,11 @@ export const MainActions = ({
   )
   const onFileUpload = e => {
     e.preventDefault()
-    uploadFile(e.target.files[0])
+    let files = e.target.files
+    let filesToUploadCount = files.length
+    for (let i = 0; i < filesToUploadCount; i++) {
+      uploadFile(files.item(i))
+    }
     e.target.value = null
   }
 
@@ -55,6 +59,7 @@ export const MainActions = ({
                 onChange={onFileUpload}
                 style={{ display: "none" }}
                 id="file-input"
+                multiple={true}
               />
               <label htmlFor="file-input">
                 {" "}

browser/app/js/browser/__tests__/MainActions.test.js

@@ -63,11 +63,20 @@ describe("MainActions", () => {
   it("should call uploadFile when a file is selected for upload", () => {
     const uploadFile = jest.fn()
     const wrapper = shallow(<MainActions uploadFile={uploadFile} />)
-    const file = new Blob(["file content"], { type: "text/plain" })
-    wrapper.find("#file-input").simulate("change", {
+    const files = [new Blob(["file content"], { type: "text/plain" })]
+    const input = wrapper.find("#file-input")
+    const event = {
       preventDefault: jest.fn(),
-      target: { files: [file] }
-    })
-    expect(uploadFile).toHaveBeenCalledWith(file)
+      target: {
+        files: {
+          length: files.length,
+          item: function(index) {
+            return files[index]
+          }
+        }
+      }
+    }
+    input.simulate("change", event)
+    expect(uploadFile).toHaveBeenCalledWith(files[0])
   })
 })