@uppy/utils: fix `relativePath` when drag&dropping a folder (#4043)

Fixes: https://github.com/transloadit/uppy/issues/4041

e2e/cypress/integration/dashboard-ui.spec.ts

@@ -33,5 +33,8 @@ describe('dashboard-ui', () => {
     cy.get('.uppy-Dashboard-Item-previewImg')
       .should('have.length', 3)
       .each((element) => expect(element).attr('src').to.include('blob:'))
+    cy.window().then(({ uppy }) => {
+      expect(JSON.stringify(uppy.getFiles().map(file => file.meta.relativePath))).to.be.equal('[null,null,null,null]')
+    })
   })
 })

packages/@uppy/utils/src/getDroppedFiles/utils/webkitGetAsEntryApi/getRelativePath.js

@@ -1,17 +0,0 @@
-/**
- * Get the relative path from the FileEntry#fullPath, because File#webkitRelativePath is always '', at least onDrop.
- *
- * @param {FileEntry} fileEntry
- *
- * @returns {string|null} - if file is not in a folder - return null (this is to
- * be consistent with .relativePath-s of files selected from My Device). If file
- * is in a folder - return its fullPath, e.g. '/simpsons/hi.jpeg'.
- */
-export default function getRelativePath (fileEntry) {
-  // fileEntry.fullPath - "/simpsons/hi.jpeg" or undefined (for browsers that don't support it)
-  // fileEntry.name - "hi.jpeg"
-  if (!fileEntry.fullPath || fileEntry.fullPath === `/${fileEntry.name}`) {
-    return null
-  }
-  return fileEntry.fullPath
-}

packages/@uppy/utils/src/getDroppedFiles/utils/webkitGetAsEntryApi/index.js

@@ -1,4 +1,3 @@
-import getRelativePath from './getRelativePath.js'
 import getFilesAndDirectoriesFromDirectory from './getFilesAndDirectoriesFromDirectory.js'
 
 /**
@@ -9,6 +8,7 @@ function getAsFileSystemHandleFromEntry (entry, logDropError) {
   return {
     // eslint-disable-next-line no-nested-ternary
     kind: entry.isFile ? 'file' : entry.isDirectory ? 'directory' : undefined,
+    name: entry.name,
     getFile () {
       return new Promise((resolve, reject) => entry.file(resolve, reject))
     },
@@ -25,17 +25,17 @@ function getAsFileSystemHandleFromEntry (entry, logDropError) {
   }
 }
 
-async function* createPromiseToAddFileOrParseDirectory (entry) {
+async function* createPromiseToAddFileOrParseDirectory (entry, relativePath) {
   // For each dropped item, - make sure it's a file/directory, and start deepening in!
   if (entry.kind === 'file') {
     const file = await entry.getFile()
     if (file !== null) {
-      file.relativePath = getRelativePath(entry)
+      file.relativePath = relativePath ? `${relativePath}/${entry.name}` : null
       yield file
     }
   } else if (entry.kind === 'directory') {
     for await (const handle of entry.values()) {
-      yield* createPromiseToAddFileOrParseDirectory(handle)
+      yield* createPromiseToAddFileOrParseDirectory(handle, `${relativePath}/${entry.name}`)
     }
   }
 }
@@ -53,7 +53,7 @@ export default async function* getFilesFromDataTransfer (dataTransfer, logDropEr
     // :entry can be null when we drop the url e.g.
     if (entry != null) {
       try {
-        yield* createPromiseToAddFileOrParseDirectory(entry, logDropError)
+        yield* createPromiseToAddFileOrParseDirectory(entry, '')
       } catch (err) {
         if (lastResortFile) {
           yield lastResortFile