Add support for dragging in multiple workflow files at once (#8757)

## Summary

Allows users to drag in multiple files that are/have embedded workflows
and loads each of them as tabs.
Previously it would only load the first one.

## Changes

- **What**: 
- process all files from drop event
- add defered errors so you don't get errors for non-visible workflows

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8757-Add-support-for-dragging-in-multiple-workflow-files-at-once-3026d73d365081c096e9dfb18ba01253)
by [Unito](https://www.unito.io)

src/utils/eventUtils.ts

@@ -1,31 +1,30 @@
-export async function extractFileFromDragEvent(
+export async function extractFilesFromDragEvent(
   event: DragEvent
-): Promise<File | FileList | undefined> {
-  if (!event.dataTransfer) return
+): Promise<File[]> {
+  if (!event.dataTransfer) return []
 
-  const { files } = event.dataTransfer
-  // Dragging from Chrome->Firefox there is a file, but it's a bmp, so ignore it
-  if (files.length === 1 && files[0].type !== 'image/bmp') {
-    return files[0]
-  } else if (files.length > 1 && Array.from(files).every(hasImageType)) {
-    return files
-  }
+  // Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
+  const files = Array.from(event.dataTransfer.files).filter(
+    (file) => file.type !== 'image/bmp'
+  )
+
+  if (files.length > 0) return files
 
   // Try loading the first URI in the transfer list
   const validTypes = ['text/uri-list', 'text/x-moz-url']
   const match = [...event.dataTransfer.types].find((t) =>
     validTypes.includes(t)
   )
-  if (!match) return
+  if (!match) return []
 
   const uri = event.dataTransfer.getData(match)?.split('\n')?.[0]
-  if (!uri) return
+  if (!uri) return []
 
   const response = await fetch(uri)
   const blob = await response.blob()
-  return new File([blob], uri, { type: blob.type })
+  return [new File([blob], uri, { type: blob.type })]
 }
 
-function hasImageType({ type }: File): boolean {
+export function hasImageType({ type }: File): boolean {
   return type.startsWith('image')
 }