[alextran1502]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
immich-code-coverage	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 13, 2023 at 5:15PM (UTC)

1 Ignored Deployment

Name	Status	Preview	Comments	Updated
immich	⬜️ Ignored (Inspect)			Feb 13, 2023 at 5:15PM (UTC)

[michelheusschen]

The upload notifications don't play along nicely. When uploading some smaller files, the upload notification only appears for a split second.

For limiting the concurrency of uploading files, I would like to propose another solution without having to import rxjs:

export const fileUploadHandler = async (
	files: File[],
	albumId: string | undefined = undefined,
	sharedKey: string | undefined = undefined,
	onDone?: (id: string) => void
) => {
	const concurrency = 2;
	const acceptedFiles = files
		.filter((file) => {
			const assetType = getFileMimeType(file).split('/')[0];
			return assetType === 'video' || assetType === 'image';
		})
		.entries();

	// Start new workers up to the set concurrency limit. Each worker will take
	// files from the shared acceptedFiles iterator.
	const workers = Array<typeof acceptedFiles>(concurrency)
		.fill(acceptedFiles)
		.map(async (files) => {
			for (const [, file] of files) {
				await fileUploader(file, albumId, sharedKey, onDone);
			}
		});

	// Wait until all workers have completed.
	await Promise.all(workers);
};

[alextran1502]

The upload notifications don't play along nicely. When uploading some smaller files, the upload notification only appears for a split second.

For limiting the concurrency of uploading files, I would like to propose another solution without having to import rxjs:

export const fileUploadHandler = async (
	files: File[],
	albumId: string | undefined = undefined,
	sharedKey: string | undefined = undefined,
	onDone?: (id: string) => void
) => {
	const concurrency = 2;
	const acceptedFiles = files
		.filter((file) => {
			const assetType = getFileMimeType(file).split('/')[0];
			return assetType === 'video' || assetType === 'image';
		})
		.entries();

	// Start new workers up to the set concurrency limit. Each worker will take
	// files from the shared acceptedFiles iterator.
	const workers = Array<typeof acceptedFiles>(concurrency)
		.fill(acceptedFiles)
		.map(async (files) => {
			for (const [, file] of files) {
				await fileUploader(file, albumId, sharedKey, onDone);
			}
		});

	// Wait until all workers have completed.
	await Promise.all(workers);
};

@michelheusschen

I was experimenting with removing the setTimeout to remove the finished item from the UI list, so that must be why it flashes for small files.

Thank you for the suggestion, I will try it in the code.

FYI, I try to use the openapi client to perform the upload action, but the payload somehow indicate the AssetType as binary even though we pass in an enum. So the server doesn't accept it. Might worth looking into in a separate PR.

[alextran1502]

@michelheusschen FYI, I discussed with the group, and we are going with RxJs route as it is easier to understand, and with tree shaking, we are not loading a lot of code from the library itself.

[jrasm91]

The lines above this also loop through the list of assets. Can we combine the two loops into one? ie for each asset, get mime type, if true add to files$?