Allow pasting attachments on Akkoma / Pleroma instances

[Steffo99]

Fixes #656.

See commit titles for info on how the bug was fixed!

[cheeaun]

@Steffo99 I saw the code formatting is a little off. Your code editor might need some prettier plugin to follow the project's prettier settings 🙇

[Steffo99]

I saw the code formatting is a little off. Your code editor might need some prettier plugin to follow the project's prettier settings 🙇

Oh, I didn't notice the .prettierrc file, and I had my editor configured to use .editorconfig instead; thanks for letting me know!

[Steffo99]

What, shouldn't this:

phanpy/src/components/compose.jsx

Lines 1308 to 1340 in 0f6f206

	onChange={(e) => {
	const files = e.target.files;
	if (!files) return;
	const mediaFiles = Array.from(files).map((file) => ({
	file,
	type: file.type,
	size: file.size,
	url: URL.createObjectURL(file),
	id: null, // indicate uploaded state
	description: null,
	}));
	console.log('MEDIA ATTACHMENTS', files, mediaFiles);
	// Validate max media attachments
	if (
	mediaAttachments.length + mediaFiles.length >
	maxMediaAttachments
	) {
	alert(
	plural(maxMediaAttachments, {
	one: 'You can only attach up to 1 file.',
	other: 'You can only attach up to # files.',
	}),
	);
	} else {
	setMediaAttachments((attachments) => {
	return attachments.concat(mediaFiles);
	});
	}
	// Reset
	e.target.value = '';
	}}

Share behaviour with this function?:

phanpy/src/components/compose.jsx

Lines 600 to 647 in 0f6f206

	const handleItems = (e) => {
	const { items } = e.clipboardData || e.dataTransfer;
	const files = [];
	for (let i = 0; i < items.length; i++) {
	const item = items[i];
	if (item.kind === 'file') {
	const file = item.getAsFile();
	if (file && supportedMimeTypes.includes(file.type)) {
	files.push(file);
	}
	}
	}
	if (files.length > 0 && mediaAttachments.length >= maxMediaAttachments) {
	alert(
	plural(maxMediaAttachments, {
	one: 'You can only attach up to 1 file.',
	other: 'You can only attach up to # files.',
	}),
	);
	return;
	}
	console.log({ files });
	if (files.length > 0) {
	e.preventDefault();
	e.stopPropagation();
	// Auto-cut-off files to avoid exceeding maxMediaAttachments
	const max = maxMediaAttachments - mediaAttachments.length;
	const allowedFiles = files.slice(0, max);
	if (allowedFiles.length <= 0) {
	alert(
	plural(maxMediaAttachments, {
	one: 'You can only attach up to 1 file.',
	other: 'You can only attach up to # files.',
	}),
	);
	return;
	}
	const mediaFiles = allowedFiles.map((file) => ({
	file,
	type: file.type,
	size: file.size,
	url: URL.createObjectURL(file),
	id: null,
	description: null,
	}));
	setMediaAttachments([...mediaAttachments, ...mediaFiles]);
	}
	};

I think that's the reason why the attach button worked but copy-and-pasting not in #656: onChange does not check mime types!

[Steffo99]

@cheeaun How would you want me to handle this? Should I just leave it alone? In that case, the PR is ready...

[Steffo99]

Whoops. Committed via web and forgot to enter commit text. A sec!

[cheeaun]

What, shouldn't this:

phanpy/src/components/compose.jsx

Lines 1308 to 1340 in 0f6f206

	onChange={(e) => {
	const files = e.target.files;
	if (!files) return;
	const mediaFiles = Array.from(files).map((file) => ({
	file,
	type: file.type,
	size: file.size,
	url: URL.createObjectURL(file),
	id: null, // indicate uploaded state
	description: null,
	}));
	console.log('MEDIA ATTACHMENTS', files, mediaFiles);
	// Validate max media attachments
	if (
	mediaAttachments.length + mediaFiles.length >
	maxMediaAttachments
	) {
	alert(
	plural(maxMediaAttachments, {
	one: 'You can only attach up to 1 file.',
	other: 'You can only attach up to # files.',
	}),
	);
	} else {
	setMediaAttachments((attachments) => {
	return attachments.concat(mediaFiles);
	});
	}
	// Reset
	e.target.value = '';
	}}

Share behaviour with this function?:

phanpy/src/components/compose.jsx

Lines 600 to 647 in 0f6f206

	const handleItems = (e) => {
	const { items } = e.clipboardData || e.dataTransfer;
	const files = [];
	for (let i = 0; i < items.length; i++) {
	const item = items[i];
	if (item.kind === 'file') {
	const file = item.getAsFile();
	if (file && supportedMimeTypes.includes(file.type)) {
	files.push(file);
	}
	}
	}
	if (files.length > 0 && mediaAttachments.length >= maxMediaAttachments) {
	alert(
	plural(maxMediaAttachments, {
	one: 'You can only attach up to 1 file.',
	other: 'You can only attach up to # files.',
	}),
	);
	return;
	}
	console.log({ files });
	if (files.length > 0) {
	e.preventDefault();
	e.stopPropagation();
	// Auto-cut-off files to avoid exceeding maxMediaAttachments
	const max = maxMediaAttachments - mediaAttachments.length;
	const allowedFiles = files.slice(0, max);
	if (allowedFiles.length <= 0) {
	alert(
	plural(maxMediaAttachments, {
	one: 'You can only attach up to 1 file.',
	other: 'You can only attach up to # files.',
	}),
	);
	return;
	}
	const mediaFiles = allowedFiles.map((file) => ({
	file,
	type: file.type,
	size: file.size,
	url: URL.createObjectURL(file),
	id: null,
	description: null,
	}));
	setMediaAttachments([...mediaAttachments, ...mediaFiles]);
	}
	};

I think that's the reason why the attach button worked but copy-and-pasting not in #656: onChange does not check mime types!

You mean the filtering logic with supportedMimeTypes? The other one has accept attribute which should already filter the files (I hope).

[Steffo99]

The other one has accept attribute which should already filter the files (I hope).

Alas, it doesn't prevent the user from adding files not matching the MIME types listed there, it just filters them by default in the file picker:

I guess that's a bug Something isn't working for a different pull request, though.

[cheeaun]

Possible to resolve the conflicts here? Thanks

[Steffo99]

@cheeaun Done!

There seem to be non-prettified files in the main branch; not modifying those to prevent more conflicts.