How to invalidate ImageSharp.Web cache?

[VILLAN3LL3]

I use the AzureBlobStorageCache in my project for user profile pictures and would like to know how to invalidate the cache in case a user replaces their profile picture?

[VILLAN3LL3]

#136

[JimBobSquarePants]

The linked question discusses deleting cached items.

When you upload a new image at the same source location the middleware will automatically detect a change and reprocess, cache, and serve the new image. However this requires a request for the image which means you need to invalidate the browser cache. The best way to do that is to create and register a no-op IImageWebProcessor that recognises a value you would send with your image, generally a time stamp containing the last edited date and time.

I’m fairly certain that the Umbraco CMS has an implementation of this you could copy

[VILLAN3LL3]

@JimBobSquarePants Thank you for your answer. In the Umbraco CMS repo there is only one IImageWebProcessor implementation which does not contain something related to caching.
In my project the GET endpoint always returns the old image after DELETE or POST, even if I disable caching in my browser. Everything works fine if I disable the Imagesharp.Web middleware.

[JimBobSquarePants]

You're hitting the browser cache then. The middleware explicitly check for file data changes.

ImageSharp.Web/src/ImageSharp.Web/Middleware/ImageSharpMiddleware.cs

Lines 441 to 489 in 67e82ab

	private async Task<ImageWorkerResult> IsNewOrUpdatedAsync(
	IImageResolver sourceImageResolver,
	string key)
	{
	// Get the source metadata for processing, storing the result for future checks.
	ImageMetadata sourceImageMetadata = await
	SourceMetadataLru.GetOrAddAsync(
	key,
	_ => sourceImageResolver.GetMetaDataAsync());
	// Check to see if the cache contains this image.
	// If not, we return early. No further checks necessary.
	(IImageCacheResolver? ImageCacheResolver, ImageCacheMetadata ImageCacheMetadata) cachedImage = await
	CacheResolverLru.GetOrAddAsync(
	key,
	async k =>
	{
	IImageCacheResolver? resolver = await this.cache.GetAsync(k);
	ImageCacheMetadata metadata = default;
	if (resolver != null)
	{
	metadata = await resolver.GetMetaDataAsync();
	}
	return (resolver, metadata);
	});
	if (cachedImage.ImageCacheResolver is null)
	{
	// Remove the null resolver from the store.
	CacheResolverLru.TryRemove(key);
	return new ImageWorkerResult(sourceImageMetadata);
	}
	// Has the cached image expired?
	// Or has the source image changed since the image was last cached?
	if (cachedImage.ImageCacheMetadata.ContentLength == 0 // Fix for old cache without length property
	|| cachedImage.ImageCacheMetadata.CacheLastWriteTimeUtc <= (DateTimeOffset.UtcNow - this.options.CacheMaxAge)
	|| cachedImage.ImageCacheMetadata.SourceLastWriteTimeUtc != sourceImageMetadata.LastWriteTimeUtc)
	{
	// We want to remove the resolver from the store so that the next check gets the updated file.
	CacheResolverLru.TryRemove(key);
	return new ImageWorkerResult(sourceImageMetadata);
	}
	// The image is cached. Return the cached image so multiple callers can write a response.
	return new ImageWorkerResult(sourceImageMetadata, cachedImage.ImageCacheMetadata, cachedImage.ImageCacheResolver);
	}

[VILLAN3LL3]

I was able to isolate the problem, the cause was the browser cache or the default cache-control header. I have now solved the problem by setting the cache-control header to "public, must-revalidate, max-age=1" for the Blob when uploading to Azure Storage. With this it works correctly, but seems quite hacky to me....