Media survive failures: uploaded when attached, the server's limits, alt text asked for

The composer uploads each file as soon as it is attached (streamed from the browser file, under its own ten-minute
timeout), shows it uploading, processing (a 202 followed until ready), ready or failed with Retry, and cancels one
removed; publishing sends the ids, so a failed publish or a retried upload sends nothing twice. Size limits and types
come from /api/v2/instance, a file without a browser type gets one from its extension, and each refusal names the file
and why. Previews are 320 px thumbnails, not whole files in memory. A picture without a description is asked about once
("Publish anyway"; a setting turns it off), descriptions are sent with PUT, and an edit keeps the post's media, language
and sensitive flag.

Profile pictures are checked against the server's types and can be removed. A card shows "Media unavailable" with the
original's link when a picture fails, the blurhash behind a sensitive placeholder, and plays a GIF only on tap under
reduced motion. A failed export says so instead of downloading part of a file.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw

Components/Composer.razor

@@ -5,8 +5,10 @@
    visibility and media (each uploaded first, with its alt text). A located post is text only, kept within its range of
    this device's position and never federated; a group post goes to the group. Both of those go through /clientapi.
    A Mastodon API post can wait for a time instead (scheduled_at, at least five minutes ahead); /scheduled lists those.
-   It can hold a poll instead of media, quote a post (Quoting), or be the persona's own post edited (Editing: its words
-   and warning change, its media, visibility and poll stay). *@
+   It can hold a poll instead of media, quote a post (Quoting), or be the persona's own post edited (Editing: its words,
+   warning, media and their descriptions change; its visibility and poll stay). A file is uploaded as soon as it is
+   picked, streamed from the browser's file, and shows its state (uploading, processing, ready, failed with Retry); its
+   id is kept, so a post that fails never uploads it again. What the server takes (types, sizes) comes from it. *@
 <EditForm Model="form" OnValidSubmit="Publish" class="flex flex-col gap-3">
 	<DataAnnotationsValidator />
 
@@ -83,29 +85,61 @@
 
 	@if (form.Media.Count > 0)
 	{
-		<div class="flex flex-col gap-2">
+		<div class="flex flex-col gap-2" data-compose-media>
 			@foreach (var media in form.Media)
 			{
-				<div class="flex w-full items-center gap-3 rounded-xl p-2 md:p-3 neo-raised neo-2xs">
-					@if (media.Base64Preview is { Length: > 0 } preview && media.ContentType.StartsWith("image"))
+				<div class="flex w-full items-center gap-3 rounded-xl p-2 md:p-3 neo-raised neo-2xs" data-upload-state="@media.State.ToString().ToLowerInvariant()">
+					@if (media.Preview is { Length: > 0 } preview)
 					{
 						<img alt="@media.AltText" class="object-cover rounded-lg max-h-20 max-w-24 flex-none" src="@preview" />
 					}
 					else
 					{
-						<i class="text-2xl @form.MediaType.GetMediaTypeIcon()"></i>
+						<i class="text-2xl @(media.ContentType?.StartsWith("video/") == true ? "ion-md-videocam" : media.ContentType?.StartsWith("audio/") == true ? "ion-md-musical-notes" : "ion-md-image")"></i>
 					}
 					<div class="flex flex-col flex-1 min-w-0 gap-1">
-						<p class="text-xs break-all"><b>@media.FileName</b> · @media.ContentType · @media.Size.GetFileSize(Localizer)</p>
-						<DTextarea TValue="string" @bind-Value="media.AltText" Size="DSize.Sm" class="w-full rounded-lg!" autocomplete="off" maxlength="1500"
-								   placeholder="@Localizer["Alternative text"]" rows="1" />
+						<p class="text-xs break-all"><b>@media.FileName</b>@(media.Size > 0 ? $" · {media.Size.GetFileSize(Localizer)}" : null)</p>
+						<p class="inline-flex items-center gap-2 text-xs">
+							@switch (media.State)
+							{
+								case UploadState.Uploading:
+									<DLoading Size="DSize.Xs" LabelText="@Localizer["Uploading"]" /><span>@Localizer["Uploading"]</span>
+									break;
+								case UploadState.Processing:
+									<DLoading Size="DSize.Xs" LabelText="@Localizer["Processing"]" /><span>@Localizer["Processing"]</span>
+									break;
+								case UploadState.Failed:
+									<i class="ion-md-alert text-error"></i><span class="text-error break-words">@media.Error</span>
+									@if (media.File is not null)
+									{
+										<DButton Size="DSize.Xs" OnClick="() => Retry(media)" data-upload-retry>@Localizer["Retry"]</DButton>
+									}
+									break;
+								default:
+									<i class="ion-md-checkmark text-success"></i><span>@Localizer["Ready"]</span>
+									break;
+							}
+						</p>
+						<DTextarea TValue="string" @bind-Value="media.AltText" @bind-Value:after="() => altTextConfirmed = false" Size="DSize.Sm"
+								   class="@(AskingAltText && Undescribed(media) ? "w-full rounded-lg! textarea-warning" : "w-full rounded-lg!")" autocomplete="off" maxlength="1500"
+								   placeholder="@Localizer["Alternative text"]" rows="1" data-alt-text />
 					</div>
-					<DButton Size="DSize.Sm" class="self-start" OnClick="() => form.Media.Remove(media)" title="@Localizer["Delete"]">
+					<DButton Size="DSize.Sm" class="self-start" OnClick="() => Remove(media)" title="@Localizer["Delete"]" aria-label="@Localizer["Delete"]">
 						<i class="ion-md-trash text-base text-error"></i>
 					</DButton>
 				</div>
 			}
 		</div>
+		@if (AskingAltText)
+		{
+			<DAlert Color="DAlertColor.Warning" Variant="DAlertVariant.Soft" class="text-sm" data-alt-reminder>
+				<span>@Localizer["{0} of the pictures have no description, which people who can't see them rely on.", form.Media.Count(Undescribed)]</span>
+				<div class="flex flex-wrap gap-2">
+					<DButton Size="DSize.Sm" OnClick="() => askingAltText = false">@Localizer["Describe them"]</DButton>
+					<DButton Size="DSize.Sm" OnClick="PublishAnyway" data-alt-publish-anyway>@Localizer["Publish anyway"]</DButton>
+				</div>
+			</DAlert>
+		}
 	}
 
 	@if (form.IsLocated)
@@ -165,12 +199,12 @@
 				<i class="ion-md-warning text-base"></i>
 			</DButton>
 
-			@if (!form.IsLocated && GroupId is null && Editing is null && !form.HasPoll)
+			@if (!form.IsLocated && GroupId is null && !form.HasPoll)
 			{
 				@* A label styled as a button opens the hidden file input. *@
 				<label class="btn btn-sm @(form.Media.Count >= MaximumFileCount ? "btn-disabled" : null)" title="@Localizer["Attach"]">
 					<InputFile accept="@AcceptedFileTypes" class="hidden" multiple="@(form.MediaType is MediaType.Images)" OnChange="OnFileChange"
-							   disabled="@(form.Media.Count >= MaximumFileCount)" />
+							   disabled="@(form.Media.Count >= MaximumFileCount)" data-attach />
 					<i class="ion-md-attach text-base"></i>
 					@if (form.Media.Count != 0)
 					{
@@ -236,6 +270,7 @@
 
 @code {
 	[Inject] StatusService StatusService { get; set; }
+	[Inject] MediaService MediaService { get; set; }
 	[Inject] AccountService AccountService { get; set; }
 	[Inject] ILoggingService Logger { get; set; }
 	[Inject] IJSRuntime JS { get; set; }
@@ -317,21 +352,40 @@
 
 	int MaximumFileCount => form.MediaType is MediaType.Images ? 4 : 1;
 
-	long MaximumFileSize => form.MediaType switch
+	// what the server takes: its types and sizes (/api/v2/instance), its defaults until they are read
+	MediaConfiguration limits = new();
+	// before publishing pictures without a description, asked once (the reader's setting); "Publish anyway" goes on
+	bool askingAltText;
+	bool altTextConfirmed;
+
+	bool AskingAltText => askingAltText && form.Media.Any(Undescribed);
+
+	static bool Undescribed(UploadMedia media) => media.ContentType?.StartsWith("image/") == true && string.IsNullOrWhiteSpace(media.AltText);
+
+	long MaximumFileSize(string type) => type.StartsWith("image/") ? limits.ImageSizeLimit : limits.VideoSizeLimit;
+
+	bool OfKind(string type) => form.MediaType switch
 	{
-		MediaType.Images => 16_777_216,
-		MediaType.Audio => 41_943_040,
-		_ => 99_614_720
+		MediaType.Images => type.StartsWith("image/"),
+		MediaType.Video => type.StartsWith("video/"),
+		_ => type.StartsWith("audio/")
 	};
 
-	string AcceptedFileTypes => form.MediaType switch
+	// the server's types of the kind chosen, and the extensions a file picker may know them by
+	string AcceptedFileTypes => string.Join(",", limits.SupportedMimeTypes.Where(OfKind).Concat(Extensions.Where(e => OfKind(e.Value)).Select(e => e.Key)));
+
+	static readonly Dictionary<string, string> Extensions = new(StringComparer.OrdinalIgnoreCase)
 	{
-		MediaType.Images => ".jpg,.jpeg,.png,.gif,.webp,.avif",
-		MediaType.Video => ".mp4,.m4v,.webm,.mov",
-		MediaType.Audio => ".mp3,.ogg,.oga,.opus,.wav,.flac,.m4a",
-		_ => default
+		[".jpg"] = "image/jpeg", [".jpeg"] = "image/jpeg", [".png"] = "image/png", [".gif"] = "image/gif", [".webp"] = "image/webp",
+		[".avif"] = "image/avif", [".mp4"] = "video/mp4", [".m4v"] = "video/mp4", [".mov"] = "video/quicktime", [".webm"] = "video/webm",
+		[".mp3"] = "audio/mpeg", [".ogg"] = "audio/ogg", [".oga"] = "audio/ogg", [".opus"] = "audio/ogg", [".wav"] = "audio/wav",
+		[".flac"] = "audio/flac", [".m4a"] = "audio/mp4"
 	};
 
+	// what a file is: the browser's word, else its extension's
+	static string TypeOf(IBrowserFile file) => file.ContentType is { Length: > 0 } type ? type.ToLowerInvariant()
+		: Extensions.GetValueOrDefault(Path.GetExtension(file.Name) ?? string.Empty);
+
 	// a new post starts in the language the persona chose in Settings, else in the reader's
 	string DefaultLanguage => CascadingState.Persona?.Source?.Language is { Length: > 0 } chosen ? chosen
 		: System.Globalization.CultureInfo.CurrentUICulture.TwoLetterISOLanguageName;
@@ -361,13 +415,31 @@
 		form.GroupId = GroupId;
 		form.MessageType = DefaultVisibility;
 		form.Language = DefaultLanguage;
+		form.Sensitive = CascadingState.Persona?.Source?.Sensitive == true;
 		form.QuotedStatusId = Quoting?.Id;
+		limits = await MediaService.Limits();
 		if (Editing is not null)
 		{
 			var source = await StatusService.Source(Editing.Id);
 			form.Content = source?.Text;
 			form.HasContentWarning = source?.SpoilerText is { Length: > 0 };
 			form.SpoilerText = source?.SpoilerText;
+			// the post as it is: its language, its sensitive flag and its media, which the edit sends back
+			form.Language = Editing.Language ?? form.Language;
+			form.Sensitive = Editing.Sensitive;
+			form.Media = [.. Editing.MediaAttachments.Select(m => new UploadMedia
+			{
+				Id = m.Id,
+				State = UploadState.Ready,
+				Posted = true,
+				AltText = m.Description,
+				SentAltText = m.Description,
+				Preview = m.Type is "image" or "gifv" or "video" ? m.PreviewUrl : null,
+				ContentType = m.Type switch { "image" => "image/jpeg", "video" or "gifv" => "video/mp4", "audio" => "audio/mpeg", _ => null },
+				FileName = Path.GetFileName(m.Url ?? string.Empty)
+			})];
+			if (form.Media.FirstOrDefault()?.ContentType is { } kind)
+				form.MediaType = kind.StartsWith("video/") ? MediaType.Video : kind.StartsWith("audio/") ? MediaType.Audio : MediaType.Images;
 		}
 		IsLoading = false;
 		if (InReplyTo is null)
@@ -433,40 +505,120 @@
 
 		foreach (var file in eventArgs.GetMultipleFiles(MaximumFileCount))
 		{
-			if (file.Size > MaximumFileSize)
+			var type = TypeOf(file);
+			if (type is null || !limits.SupportedMimeTypes.Contains(type) || !OfKind(type))
+			{
+				fileErrors.Add(Localizer["\"{0}\" is not a kind of file this server takes.", file.Name]);
+				continue;
+			}
+			if (file.Size > MaximumFileSize(type))
 			{
 				fileErrors.Add(Localizer["Supplied file \"{0}\" with size {1} exceeds the maximum of {2}.", file.Name,
-					file.Size.GetFileSize(Localizer), MaximumFileSize.GetFileSize(Localizer)]);
+					file.Size.GetFileSize(Localizer), MaximumFileSize(type).GetFileSize(Localizer)]);
 				continue;
 			}
 
-			if (await ReadFile(file) is { } media)
-				form.Media.Add(media);
-			else
-				fileErrors.Add(Localizer["The file \"{0}\" could not be read.", file.Name]);
+			var media = new UploadMedia { File = file, FileName = file.Name, ContentType = type, Size = file.Size };
+			if (type.StartsWith("image/"))
+				media.Preview = await Thumbnail(file);
+			form.Media.Add(media);
+			altTextConfirmed = false;
+			Start(media);
 		}
 	}
 
-	/// <summary>Reads a picked file into memory; null when the browser can't read it (logged).</summary>
-	async Task<UploadMedia> ReadFile(IBrowserFile file, CancellationToken cancellationToken = default)
+	// a small picture of it, which the browser makes (nothing of the whole file stays in memory); none when it can't
+	async Task<string> Thumbnail(IBrowserFile file)
 	{
 		try
 		{
-			using var memoryStream = new MemoryStream();
-			await using var fileStream = file.OpenReadStream(MaximumFileSize, cancellationToken);
-			await fileStream.CopyToAsync(memoryStream, cancellationToken);
-			var media = new UploadMedia { FileName = file.Name, ContentType = file.ContentType, Size = file.Size, Blob = memoryStream.ToArray() };
-			if (file.ContentType.StartsWith("image"))
-				media.Base64Preview = $"data:{media.ContentType};base64,{Convert.ToBase64String(media.Blob)}";
-			return media;
+			var small = await file.RequestImageFileAsync("image/jpeg", 320, 320);
+			await using var stream = small.OpenReadStream(2 * 1024 * 1024);
+			using var buffer = new MemoryStream();
+			await stream.CopyToAsync(buffer);
+			return $"data:image/jpeg;base64,{Convert.ToBase64String(buffer.ToArray())}";
 		}
 		catch (Exception ex)
 		{
-			await Logger.ProcessError(ex, $"{nameof(Composer)}.{nameof(ReadFile)}:{file.Name}", cancellationToken);
+			await Logger.ProcessWarning($"No preview of {file.Name}: {ex.Message}", $"{nameof(Composer)}.{nameof(Thumbnail)}");
 			return default;
 		}
 	}
 
+	void Start(UploadMedia media)
+	{
+		media.Cancel = new();
+		media.State = UploadState.Uploading;
+		media.Error = default;
+		media.Done = Upload(media, media.Cancel.Token);
+	}
+
+	// uploads it, then follows what the server still processes (audio and video) until it is ready or refused
+	async Task Upload(UploadMedia media, CancellationToken cancellationToken)
+	{
+		var uploaded = await MediaService.Upload(media, MaximumFileSize(media.ContentType), cancellationToken);
+		if (cancellationToken.IsCancellationRequested)
+			return;
+		if (uploaded.IsInvalid)
+		{
+			media.State = UploadState.Failed;
+			media.Error = uploaded.ErrorMessage;
+			await InvokeAsync(StateHasChanged);
+			return;
+		}
+		var attachment = (MediaAttachment)uploaded.Data;
+		media.Id = attachment.Id;
+		media.SentAltText = attachment.Description;
+		media.State = attachment.Url is null ? UploadState.Processing : UploadState.Ready;
+		await InvokeAsync(StateHasChanged);
+		while (media.State == UploadState.Processing && !cancellationToken.IsCancellationRequested)
+		{
+			try
+			{
+				await Task.Delay(2000, cancellationToken);
+			}
+			catch (OperationCanceledException)
+			{
+				return;
+			}
+			var processed = await MediaService.Get(media.Id, cancellationToken);
+			if (cancellationToken.IsCancellationRequested)
+				return;
+			if (processed.IsInvalid)
+			{
+				media.State = UploadState.Failed;
+				media.Error = processed.ErrorMessage;
+			}
+			else if (processed.Data is MediaAttachment)
+				media.State = UploadState.Ready;
+			await InvokeAsync(StateHasChanged);
+		}
+	}
+
+	// a failed upload again, from the same file (the browser can still read it unless files were picked since)
+	void Retry(UploadMedia media) => Start(media);
+
+	void Remove(UploadMedia media)
+	{
+		media.Cancel?.Cancel();
+		form.Media.Remove(media);
+	}
+
+	// the reader chose to publish its pictures without descriptions
+	async Task PublishAnyway()
+	{
+		altTextConfirmed = true;
+		askingAltText = false;
+		await Publish();
+	}
+
+	public override async ValueTask DisposeAsync()
+	{
+		foreach (var media in form.Media)
+			media.Cancel?.Cancel();
+		await base.DisposeAsync();
+	}
+
 	async Task Publish()
 	{
 		error = default;
@@ -480,6 +632,18 @@
 			error = Localizer["A poll needs two choices at least."];
 			return;
 		}
+		if (!altTextConfirmed && CascadingState.PublicCacheData.PageSettings.RemindAltText && form.Media.Any(Undescribed))
+		{
+			askingAltText = true;
+			return;
+		}
+		// what is still uploading or processing is waited for
+		if (form.Media.Any(m => m.State is UploadState.Uploading or UploadState.Processing))
+		{
+			isPublishing = true;
+			await Task.WhenAll(form.Media.Select(m => m.Done));
+			isPublishing = false;
+		}
 		if (Editing is not null)
 		{
 			isPublishing = true;

Components/Content.razor

@@ -623,9 +623,10 @@
 					<NerdTip Heading="@Localizer["Media"]" Rows="MediaRows(media)" Class="block w-full" TapOpens="false">
 						@if ((status.Sensitive || IsBlurred) && !revealedMedia.Contains(media.Id))
 						{
-							<button type="button" class="flex items-center justify-center w-full aspect-video rounded-lg neo-inset neo-2xs text-sm"
-									@onclick="() => revealedMedia.Add(media.Id)">
-								<i class="ion-md-eye-off mr-2"></i>@(IsBlurred ? Localizer["Filtered media, show"] : Localizer["Sensitive media, show"])
+							@* its blurhash shows behind it: the colours, nothing of what it shows *@
+							<button type="button" class="flex items-center justify-center w-full aspect-video rounded-lg neo-inset neo-2xs text-sm bg-cover"
+									@onclick="() => revealedMedia.Add(media.Id)" data-blurhash="@media.Blurhash">
+								<span class="inline-flex items-center rounded-box bg-base-100/85 px-3 py-1"><i class="ion-md-eye-off mr-2"></i>@(IsBlurred ? Localizer["Filtered media, show"] : Localizer["Sensitive media, show"])</span>
 							</button>
 						}
 						else
@@ -776,22 +777,37 @@
 		}
 	</div>;
 
-	RenderFragment Media(MediaAttachment media, bool several) => media.Type switch
+	// media that didn't load (gone from their server, or refused): said so, with the way to their original
+	HashSet<string> unavailableMedia = [];
+
+	RenderFragment Media(MediaAttachment media, bool several) => unavailableMedia.Contains(media.Id) ? Unavailable(media) : media.Type switch
 	{
 		"image" => @<button type="button" class="block w-full cursor-zoom-in" @onclick="() => OpenPicture(media)"
 								 aria-label="@(media.Description ?? Localizer["Picture"])" data-picture>
 			<img alt="@media.Description" title="@media.Description" loading="lazy" class="w-full rounded-lg object-cover @(several ? "aspect-square" : "max-h-[60vh]")"
-				 src="@(media.PreviewUrl ?? media.Url)" data-blurhash="@media.Blurhash" style="@FocalPoint(media)" />
+				 src="@(media.PreviewUrl ?? media.Url)" data-blurhash="@media.Blurhash" style="@FocalPoint(media)" @onerror="() => unavailableMedia.Add(media.Id)" />
 		</button>,
-		"gifv" => @<video class="w-full rounded-lg" autoplay muted loop playsinline title="@media.Description" src="@media.Url"></video>,
+		// under reduced motion a gifv waits for a tap (its controls)
+		"gifv" => @<video class="w-full rounded-lg" autoplay="@(!CascadingState.Status.PrefersReducedMotion())" controls="@CascadingState.Status.PrefersReducedMotion()" muted loop
+						  playsinline poster="@media.PreviewUrl" title="@media.Description" src="@media.Url" @onerror="() => unavailableMedia.Add(media.Id)"></video>,
 		"video" => @<video class="w-full max-h-[50vh] aspect-video rounded-lg neo-inset neo-2xs" controls playsinline preload="metadata"
-						  poster="@media.PreviewUrl" title="@media.Description" src="@media.Url"></video>,
-		"audio" => @<audio class="w-full" controls preload="metadata" title="@media.Description" src="@media.Url"></audio>,
+						  poster="@media.PreviewUrl" title="@media.Description" src="@media.Url" @onerror="() => unavailableMedia.Add(media.Id)"></video>,
+		"audio" => @<audio class="w-full" controls preload="metadata" title="@media.Description" src="@media.Url" @onerror="() => unavailableMedia.Add(media.Id)"></audio>,
 		_ => @<a class="btn btn-sm justify-start" href="@media.Url" target="_blank" rel="noopener noreferrer">
 			<i class="ion-md-document"></i><span class="truncate">@(media.Description ?? media.Url)</span>
 		</a>
 	};
 
+	RenderFragment Unavailable(MediaAttachment media) =>
+		@<div class="flex flex-col items-center justify-center gap-2 w-full aspect-video rounded-lg neo-inset neo-2xs text-sm" data-media-unavailable>
+			<i class="ion-md-alert text-lg opacity-70" aria-hidden="true"></i>
+			<span>@Localizer["Media unavailable"]</span>
+			@if ((media.RemoteUrl ?? media.Url) is { Length: > 0 } original)
+			{
+				<a class="link text-xs pointer-coarse:py-3.5" href="@original" target="_blank" rel="noopener noreferrer">@Localizer["Open original"]</a>
+			}
+		</div>;
+
 	async Task Act(StatusAction action)
 	{
 		isActing = true;

Components/Settings/DataTransfer.razor

@@ -95,9 +95,15 @@
 	async Task Export(PortableData data)
 	{
 		exporting = data;
-		var bytes = await PortabilityService.Export(data, CascadingState.PersonaId);
+		var result = await PortabilityService.Export(data, CascadingState.PersonaId);
 		exporting = null;
-		await DownloadFile.DownloadFileAsync(PortabilityService.FileName(data), bytes, "text/csv");
+		if (result.IsInvalid)
+		{
+			Toast.AddResponseError(result);
+			return;
+		}
+
+		await DownloadFile.DownloadFileAsync(PortabilityService.FileName(data), (byte[])result.Data, "text/csv");
 	}
 
 	async Task Pick(InputFileChangeEventArgs eventArgs)

Components/Settings/ProfileEditor.razor

@@ -18,19 +18,35 @@ else
 {
 	<EditForm Model="form" OnValidSubmit="Save" class="flex flex-col gap-4 w-full" data-profile-editor>
 		<div class="relative w-full">
-			<img class="w-full h-28 md:h-36 object-cover rounded-xl" src="@(form.Header?.Base64Preview ?? account.Header)" alt="@Localizer["Header"]" />
-			<img class="absolute -bottom-6 left-4 size-20 rounded-full object-cover neo-raised neo-xs" src="@(form.Avatar?.Base64Preview ?? account.Avatar)"
+			<img class="w-full h-28 md:h-36 object-cover rounded-xl" src="@(form.Header?.Preview ?? account.Header)" alt="@Localizer["Header"]" />
+			<img class="absolute -bottom-6 left-4 size-20 rounded-full object-cover neo-raised neo-xs" src="@(form.Avatar?.Preview ?? account.Avatar)"
 				 alt="@Localizer["Avatar"]" />
 		</div>
 		<div class="flex flex-wrap gap-3 pt-6">
-			<label class="flex flex-col gap-1 text-sm">
-				<span>@Localizer["Avatar"]</span>
-				<DFileInput Size="DSize.Sm" Accept="image/png,image/jpeg,image/gif,image/webp" OnChange="e => Pick(e, true)" data-profile-avatar />
-			</label>
-			<label class="flex flex-col gap-1 text-sm">
-				<span>@Localizer["Header"]</span>
-				<DFileInput Size="DSize.Sm" Accept="image/png,image/jpeg,image/gif,image/webp" OnChange="e => Pick(e, false)" data-profile-header />
-			</label>
+			<div class="flex flex-col gap-1 text-sm">
+				<label class="flex flex-col gap-1">
+					<span>@Localizer["Avatar"]</span>
+					<DFileInput Size="DSize.Sm" Accept="@PictureTypes" OnChange="e => Pick(e, true)" data-profile-avatar />
+				</label>
+				@if (HasOwn(account.Avatar) && form.Avatar is null)
+				{
+					<DButton Size="DSize.Xs" class="self-start" Disabled="IsDefaultDisabled || isSaving" OnClick="() => RemovePicture(true)" data-profile-avatar-remove>
+						<i class="ion-md-trash text-error"></i><span>@Localizer["Remove the avatar"]</span>
+					</DButton>
+				}
+			</div>
+			<div class="flex flex-col gap-1 text-sm">
+				<label class="flex flex-col gap-1">
+					<span>@Localizer["Header"]</span>
+					<DFileInput Size="DSize.Sm" Accept="@PictureTypes" OnChange="e => Pick(e, false)" data-profile-header />
+				</label>
+				@if (HasOwn(account.Header) && form.Header is null)
+				{
+					<DButton Size="DSize.Xs" class="self-start" Disabled="IsDefaultDisabled || isSaving" OnClick="() => RemovePicture(false)" data-profile-header-remove>
+						<i class="ion-md-trash text-error"></i><span>@Localizer["Remove the header"]</span>
+					</DButton>
+				}
+			</div>
 		</div>
 
 		<label class="flex flex-col gap-1 max-w-md">
@@ -110,11 +126,10 @@ else
 
 @code {
 	[Inject] AccountService AccountService { get; set; }
+	[Inject] MediaService MediaService { get; set; }
 	[Inject] AuthService AuthService { get; set; }
 	[Inject] ILoggingService Logger { get; set; }
 
-	// PrivaPub keeps pictures up to 20 MB and resizes them
-	const long MaximumPictureSize = 20 * 1024 * 1024;
 	static readonly MessageType[] Visibilities = [MessageType.Public, MessageType.Unlisted, MessageType.FollowersOnly];
 
 	Account account;
@@ -122,6 +137,13 @@ else
 	string loadedPersonaId;
 	bool isSaving;
 	List<string> pictureErrors = [];
+	// the picture types the server takes, read with the account
+	List<string> pictureTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+
+	string PictureTypes => string.Join(",", pictureTypes);
+
+	// a picture of its own, not the server's default
+	static bool HasOwn(string url) => url is { Length: > 0 } && !url.Contains("/missing-", StringComparison.Ordinal);
 
 	protected override async Task OnParametersSetAsync()
 	{
@@ -145,6 +167,7 @@ else
 	{
 		// the account as the persona sees itself, with its Source
 		account = await AuthService.CurrentAccount();
+		pictureTypes = [.. (await MediaService.Limits()).SupportedMimeTypes.Where(t => t.StartsWith("image/"))];
 		Reset();
 	}
 
@@ -165,30 +188,55 @@ else
 	{
 		pictureErrors = [];
 		var file = eventArgs.File;
-		if (file.Size > MaximumPictureSize)
+		if (!pictureTypes.Contains(file.ContentType))
+		{
+			pictureErrors.Add(Localizer["\"{0}\" is not a kind of file this server takes.", file.Name]);
+			return;
+		}
+		if (file.Size > ProfileForm.MaximumPictureSize)
 		{
 			pictureErrors.Add(Localizer["Supplied file \"{0}\" with size {1} exceeds the maximum of {2}.", file.Name,
-				file.Size.GetFileSize(Localizer), MaximumPictureSize.GetFileSize(Localizer)]);
+				file.Size.GetFileSize(Localizer), ProfileForm.MaximumPictureSize.GetFileSize(Localizer)]);
 			return;
 		}
 
+		// the file is sent as it is when saving; only a small picture of it is kept to show it now
+		var picture = new UploadMedia { File = file, FileName = file.Name, ContentType = file.ContentType, Size = file.Size };
 		try
 		{
-			using var memoryStream = new MemoryStream();
-			await using var fileStream = file.OpenReadStream(MaximumPictureSize);
-			await fileStream.CopyToAsync(memoryStream);
-			var picture = new UploadMedia { FileName = file.Name, ContentType = file.ContentType, Size = file.Size, Blob = memoryStream.ToArray() };
-			picture.Base64Preview = $"data:{picture.ContentType};base64,{Convert.ToBase64String(picture.Blob)}";
-			if (isAvatar)
-				form.Avatar = picture;
-			else
-				form.Header = picture;
+			var small = await file.RequestImageFileAsync("image/jpeg", isAvatar ? 240 : 900, isAvatar ? 240 : 300);
+			await using var stream = small.OpenReadStream(4 * 1024 * 1024);
+			using var buffer = new MemoryStream();
+			await stream.CopyToAsync(buffer);
+			picture.Preview = $"data:image/jpeg;base64,{Convert.ToBase64String(buffer.ToArray())}";
 		}
 		catch (Exception ex)
 		{
 			await Logger.ProcessError(ex, $"{nameof(ProfileEditor)}.{nameof(Pick)}:{file.Name}");
 			pictureErrors.Add(Localizer["The file \"{0}\" could not be read.", file.Name]);
+			return;
 		}
+		if (isAvatar)
+			form.Avatar = picture;
+		else
+			form.Header = picture;
+	}
+
+	async Task RemovePicture(bool avatar)
+	{
+		isSaving = true;
+		var result = await AccountService.RemovePicture(avatar);
+		isSaving = false;
+		if (result.IsInvalid)
+		{
+			Toast.AddResponseError(result);
+			return;
+		}
+
+		// the rest of the form stays as being written: it shows the server's pictures, which are the account's
+		account = (Account)result.Data;
+		CascadingState.PersonaChanged(account);
+		Toast.AddResponseSuccess(avatar ? Localizer["Avatar removed."] : Localizer["Header removed."]);
 	}
 
 	async Task Save()