fix: Moving an image to empty space results in endless upload (#3799)

* fix: Error dragging images below doc, types

* fix: Handle html/text content dropped into padding

* refactor, docs

shared/utils/files.ts

@@ -4,7 +4,7 @@
  * @param bytes filesize in bytes
  * @returns Human readable filesize as a string
  */
-export const bytesToHumanReadable = (bytes: number) => {
+export function bytesToHumanReadable(bytes: number) {
   const out = ("0".repeat((bytes.toString().length * 2) % 3) + bytes).match(
     /.{3}/g
   );
@@ -18,7 +18,71 @@ export const bytesToHumanReadable = (bytes: number) => {
   return `${Number(out[0])}${f === "00" ? "" : `.${f}`} ${
     "  kMGTPEZY"[out.length]
   }B`;
-};
+}
+
+/**
+ * Get an array of File objects from a drag event
+ *
+ * @param event The react or native drag event
+ * @returns An array of Files
+ */
+export function getDataTransferFiles(
+  event: React.DragEvent<HTMLElement> | DragEvent
+): File[] {
+  const dt = event.dataTransfer;
+
+  if (dt) {
+    if ("files" in dt && dt.files.length) {
+      return dt.files ? Array.prototype.slice.call(dt.files) : [];
+    }
+
+    if ("items" in dt && dt.items.length) {
+      return dt.items
+        ? Array.prototype.slice
+            .call(dt.items)
+            .filter((dt: DataTransferItem) => dt.kind !== "string")
+            .map((dt: DataTransferItem) => dt.getAsFile())
+            .filter(Boolean)
+        : [];
+    }
+  }
+
+  return [];
+}
+
+/**
+ * Get an array of DataTransferItems from a drag event
+ *
+ * @param event The react or native drag event
+ * @returns An array of DataTransferItems
+ */
+export function getDataTransferItems(
+  event: React.DragEvent<HTMLElement> | DragEvent
+): DataTransferItem[] {
+  const dt = event.dataTransfer;
+
+  if (dt) {
+    if ("items" in dt && dt.items.length) {
+      return dt.items ? Array.prototype.slice.call(dt.items) : [];
+    }
+  }
+
+  return [];
+}
+
+/**
+ * Get an array of Files from an input event
+ *
+ * @param event The react or native input event
+ * @returns An array of Files
+ */
+export function getEventFiles(
+  event: React.ChangeEvent<HTMLInputElement> | Event
+): File[] {
+  return event.target && "files" in event.target
+    ? Array.prototype.slice.call(event.target.files)
+    : [];
+}
 
 /**
  * An array of image mimetypes commonly supported by modern browsers

shared/utils/getDataTransferFiles.ts

@@ -1,28 +0,0 @@
-export default function getDataTransferFiles(
-  event:
-    | Event
-    | React.FormEvent<HTMLInputElement>
-    | React.DragEvent<HTMLElement>
-): File[] {
-  let dataTransferItemsList!: FileList | DataTransferItemList;
-
-  if ("dataTransfer" in event) {
-    const dt = event.dataTransfer;
-
-    if (dt.files && dt.files.length) {
-      dataTransferItemsList = dt.files;
-    } else if (dt.items && dt.items.length) {
-      // During the drag even the dataTransfer.files is null
-      // but Chrome implements some drag store, which is accesible via dataTransfer.items
-      dataTransferItemsList = dt.items;
-    }
-  } else if (event.target && "files" in event.target) {
-    // @ts-expect-error fallback
-    dataTransferItemsList = event.target.files;
-  }
-
-  // Convert from DataTransferItemsList to the native Array
-  return dataTransferItemsList
-    ? Array.prototype.slice.call(dataTransferItemsList)
-    : [];
-}