feat: Upload remote-hosted images on paste (#8301)

* First pass

* fix

* tidy, tidy

* Determine dimensions

* docs

* test getFileNameFromUrl

* PR feedback

* tsc

shared/utils/files.test.ts

@@ -1,7 +1,7 @@
-import { bytesToHumanReadable } from "./files";
+import { bytesToHumanReadable, getFileNameFromUrl } from "./files";
 
 describe("bytesToHumanReadable", () => {
-  test("Outputs readable string", () => {
+  it("outputs readable string", () => {
     expect(bytesToHumanReadable(0)).toBe("0 Bytes");
     expect(bytesToHumanReadable(0.0)).toBe("0 Bytes");
     expect(bytesToHumanReadable(33)).toBe("33 Bytes");
@@ -15,3 +15,20 @@ describe("bytesToHumanReadable", () => {
     expect(bytesToHumanReadable(undefined)).toBe("0 Bytes");
   });
 });
+
+describe("getFileNameFromUrl", () => {
+  it("returns the filename from a URL", () => {
+    expect(getFileNameFromUrl("https://example.com/file")).toBe("file");
+    expect(getFileNameFromUrl("https://example.com/file.txt")).toBe("file.txt");
+    expect(
+      getFileNameFromUrl("https://example.com/file.txt?query=string")
+    ).toBe("file.txt");
+    expect(getFileNameFromUrl("https://example.com/file.txt#hash")).toBe(
+      "file.txt"
+    );
+    expect(
+      getFileNameFromUrl("https://example.com/file.txt?query=string#hash")
+    ).toBe("file.txt");
+    expect(getFileNameFromUrl("https://example.com/")).toBe("");
+  });
+});

shared/utils/files.ts

@@ -112,3 +112,20 @@ export function getEventFiles(
     ? Array.prototype.slice.call(event.target.files)
     : [];
 }
+
+/**
+ * Get the likely filename from a URL
+ *
+ * @param url The URL to get the filename from
+ * @returns The filename or null if it could not be determined
+ */
+export function getFileNameFromUrl(url: string) {
+  try {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const filename = pathname.substring(pathname.lastIndexOf("/") + 1);
+    return filename;
+  } catch (error) {
+    return null;
+  }
+}