Files
How to use the file related classes of the bit Butil?
Usage
The file features live in two classes. Inject the ones you need and use them like this:
@inject Bit.Butil.FileReader fileReader
@inject Bit.Butil.ObjectUrls objectUrls
@code {
var text = await fileReader.ReadAsText(fileInput);
var url = await objectUrls.Create(bytes, "image/png");
}FileReader
The FileReader class wraps the
FileReader API
to read files selected in an <input type="file"> element as metadata, text, bytes or data URLs.
GetFileInfos:
Returns metadata (Name, Size and Type) for every file selected in the given input element (MDN).
ReadAsText:
Reads the first selected file as UTF-8 text (MDN).
ReadAsBytes:
Reads the first selected file as raw bytes (MDN).
ReadAsDataUrl:
Reads the first selected file as a base-64 data URL, convenient for image previews (MDN).
Clear:
Clears the input's selection (resets itsfiles list)
(MDN).
GetFileInfos:
Returns metadata (Name, Size and Type) for every file selected in the given input element (MDN).
@inject Bit.Butil.FileReader fileReader
<input type="file" @ref="fileInput" multiple />
<BitButton OnClick="GetFileInfos">GetFileInfos</BitButton>
<div>@fileInfos</div>
@code {
private ElementReference fileInput;
private string? fileInfos;
private async Task GetFileInfos()
{
var infos = await fileReader.GetFileInfos(fileInput);
if (infos.Length == 0)
{
fileInfos = "No file selected.";
return;
}
fileInfos = string.Join(" | ", infos.Select(i => $"{i.Name} ({i.Size} bytes, {i.Type})"));
}
}ReadAsText:
Reads the first selected file as UTF-8 text (MDN).
@inject Bit.Butil.FileReader fileReader
<input type="file" @ref="fileInput" multiple />
<BitButton OnClick="ReadAsText">ReadAsText</BitButton>
<div>@fileText</div>
@code {
private ElementReference fileInput;
private string? fileText;
private async Task ReadAsText()
{
var text = await fileReader.ReadAsText(fileInput);
fileText = string.IsNullOrEmpty(text) ? "No file or empty content." : text;
}
}ReadAsBytes:
Reads the first selected file as raw bytes (MDN).
@inject Bit.Butil.FileReader fileReader
<input type="file" @ref="fileInput" multiple />
<BitButton OnClick="ReadAsBytes">ReadAsBytes</BitButton>
<div>@fileBytes</div>
@code {
private ElementReference fileInput;
private string? fileBytes;
private async Task ReadAsBytes()
{
var bytes = await fileReader.ReadAsBytes(fileInput);
fileBytes = bytes is null ? "No file selected." : $"{bytes.Length} bytes";
}
}ReadAsDataUrl:
Reads the first selected file as a base-64 data URL, convenient for image previews (MDN).
@inject Bit.Butil.FileReader fileReader
<input type="file" @ref="fileInput" multiple />
<BitButton OnClick="ReadAsDataUrl">ReadAsDataUrl</BitButton>
<div>@fileDataUrl</div>
@if (imagePreviewUrl is not null)
{
<img src="@imagePreviewUrl" alt="Preview" />
}
@code {
private ElementReference fileInput;
private string? fileDataUrl;
private string? imagePreviewUrl;
private async Task ReadAsDataUrl()
{
var dataUrl = await fileReader.ReadAsDataUrl(fileInput);
if (string.IsNullOrEmpty(dataUrl))
{
fileDataUrl = "No file selected.";
imagePreviewUrl = null;
return;
}
imagePreviewUrl = dataUrl.StartsWith("data:image/", StringComparison.OrdinalIgnoreCase)
? dataUrl
: null;
fileDataUrl = dataUrl;
}
}Clear:
Clears the input's selection (resets its
@inject Bit.Butil.FileReader fileReader
<input type="file" @ref="fileInput" multiple />
<BitButton OnClick="Clear">Clear</BitButton>
@code {
private ElementReference fileInput;
private async Task Clear()
{
await fileReader.Clear(fileInput);
}
}ObjectUrls
The ObjectUrls class wraps
URL.createObjectURL
and
URL.revokeObjectURL
for arbitrary byte payloads.
Create:
Creates a blob object URL from raw bytes plus an optional MIME type (MDN).
Revoke:
Revokes a previously created object URL to release its memory (MDN).
Create:
Creates a blob object URL from raw bytes plus an optional MIME type (MDN).
@inject Bit.Butil.ObjectUrls objectUrls
<BitTextField @bind-Value="blobText" Label="Text to blob" />
<BitButton OnClick="CreateObjectUrl">Create</BitButton>
@if (objectUrl is not null)
{
<a href="@objectUrl" target="_blank" rel="noopener">Open blob URL</a>
}
@code {
private string? blobText;
private string? objectUrl;
private async Task CreateObjectUrl()
{
var bytes = System.Text.Encoding.UTF8.GetBytes(blobText ?? string.Empty);
objectUrl = await objectUrls.Create(bytes, "text/plain");
}
}Revoke:
Revokes a previously created object URL to release its memory (MDN).
@inject Bit.Butil.ObjectUrls objectUrls
<BitButton OnClick="RevokeObjectUrl">Revoke</BitButton>
@code {
private string? objectUrl;
private async Task RevokeObjectUrl()
{
if (objectUrl is null) return;
await objectUrls.Revoke(objectUrl);
objectUrl = null;
}
}