core: uppy.addFile should accept browser File objects (#4020)

* If non-remote file has no .data, it’s a File object from the browser, convert it to Uppy format

* Add test

* Update packages/@uppy/core/src/Uppy.js

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Check for instanceof File

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

packages/@uppy/core/src/Uppy.js

@@ -434,6 +434,18 @@ class Uppy {
    * The `files` value is passed in because it may be updated by the caller without updating the store.
    */
   #checkAndCreateFileStateObject (files, fileDescriptor) {
+    // Uppy expects files in { name, type, size, data } format.
+    // If the actual File object is passed from input[type=file] or drag-drop,
+    // we normalize it to match Uppy file object
+    if (fileDescriptor instanceof File) {
+      fileDescriptor = {
+        name: fileDescriptor.name,
+        type: fileDescriptor.type,
+        size: fileDescriptor.size,
+        data: fileDescriptor,
+      }
+    }
+
     const fileType = getFileType(fileDescriptor)
     const fileName = getFileName(fileType, fileDescriptor)
     const fileExtension = getFileNameAndExtension(fileName).extension

packages/@uppy/core/src/Uppy.test.js

@@ -736,6 +736,14 @@ describe('src/Core', () => {
       expect(fileAddedEventMock.mock.calls[0][0]).toEqual(newFile)
     })
 
+    it('should add a file from a File object', () => {
+      const fileData = new File([sampleImage], { type: 'image/jpeg' })
+      const core = new Core()
+
+      const fileId = core.addFile(fileData)
+      expect(core.getFile(fileId).id).toEqual(fileId)
+    })
+
     it('should not allow a file that does not meet the restrictions', () => {
       const core = new Core({
         restrictions: {