Drag-and-dropping images from chromium-based browsers creates undeletable files

[BartHageman]

Describe the bug
Dragging and dropping an image from a chromium based browser (Tested on Brave and MS Edge) sometimes creates an undeletable file, created with a number in the following format: ' 1.' ,' 2.', '3.'

Directory listing:

Directory of C:\Users\barth\Sync\Visual Library\Miscellaneous

12/09/2023  20:41    <DIR>          .
11/09/2023  00:29    <DIR>          ..
12/09/2023  20:40                 7  1.
12/09/2023  20:41                 7  2.
12/09/2023  20:41                 0 restofthefiles.txt

Adding a new file and incrementing with each drag and drop.
When attempting to delete these files using file explorer, it claims the files cannot be found (even though it is still displaying them. Likely because of it's abnormal naming scheme (no extension after the period).
Files must be deleted using the command line.
Firefox does not seem to produce this behavior, and dragging and dropping works as expected.

To Reproduce
Steps to reproduce the behavior:

1. Open Microsoft Edge
2. Navigate to any twitter page (twitter usually produces this bug, although it's not the only place it happens.)
3. Drag an image over to a folder in your locations in Allusion and drop it.
4. Instead of an image, a generic empty file is created without an extension.

Expected behavior
The image that was dragged and dropped should be added to the folder.

Screenshots

Allusion version

• 1.0.0-rc.10

Desktop OS

• Windows 11
• Microsoft Edge Version 116.0.1938.81 (Official build) (64-bit)
• Brave [Version 1.57.62 Chromium: 116.0.5845.180 (Official Build) (64-bit)]
• Firefox 117.0.1 (64-bit)

[BartHageman]

Issue appears to be a happening in a few places:

Allusion/src/frontend/containers/Outliner/LocationsPanel/dnd.ts

Lines 140 to 149 in 631cfb5

	if (e.dataTransfer.files.length > 0) {
	// tslint:disable-next-line: prefer-for-of
	for (let i = 0; i < e.dataTransfer.files.length; i++) {
	const file = e.dataTransfer.files[i];
	// Check if file is an image
	if (ALLOWED_FILE_DROP_TYPES.includes(file.type)) {
	dropItems.add(file);
	}
	}
	}

Apparently the "file.path" value in the file can be empty. If this is the case, the file should probably be skipped.
If we patch it to do so, we move onto the 'text/html' datatransfer, which works as expected.

Allusion/src/frontend/containers/Outliner/LocationsPanel/dnd.ts

Lines 168 to 181 in 631cfb5

	const imageItems = Array.from(dropItems);
	// Filter out URLs that are not an image
	const imageChecks = await Promise.all(
	imageItems.map(async (item) => {
	if (item instanceof File) {
	return true;
	// Check if the URL has an image extension, or perform a network request
	} else if (IMG_EXTENSIONS.some((ext) => item.toLowerCase().includes(`.${ext}`))) {
	return true;
	} else {
	return await testImage(item);
	}
	}),
	);

Then this section, we filter out URLs without image extensions and perform the check. However, our obtained URL from twitter comes in a different format:
https://pbs.twimg.com/media/[identifier]?format=jpg&name=medium, and gets missed. So we move to fetch it and check the type of the resulting blob.

Allusion/src/frontend/containers/Outliner/LocationsPanel/dnd.ts

Lines 101 to 109 in 631cfb5

	/** Tests whether a URL points to an image */
	async function testImage(url: string, timeout: number = 2000): Promise<boolean> {
	try {
	const blob = await timeoutPromise(timeout, fetch(url));
	return IMG_EXTENSIONS.some((ext) => blob.type.endsWith(ext));
	} catch (e) {
	return false;
	}
	}

Unfortunately, by the looks of things the blob returned has type basic, and is therefore not recognized.

Haven't gotten to the bottom of this yet, but it's a start.

[BartHageman]

Incidentally, if we apply a 'naive' fix of removing the dot from

else if (IMG_EXTENSIONS.some((ext) => item.toLowerCase().includes(`.${ext}`))) { 

Then the image gets pulled in as expected. However, I feel like this is not ideal.